Color-role review
Find which palette colors can serve as text on surface, text on accent, icon on fill, or border on background.
Accessible pair finder
Find readable foreground and background pairs.
Paste a HEX palette or load the demo colors, choose a contrast threshold, and find which foreground/background directions meet normal text AA, normal text AAA, or large-text and UI contrast targets. Hue Codex sorts passing pairs by contrast, previews each readable combination, and exports copy-ready pair notes for palette QA, color roles, and interface review.
Free color utility
Readable Pairs
Inputs update live, exports are copy-ready, and the color math stays deterministic.
Contrast matrix
Readable pairs
Instructions
- Enter one HEX color per line, or use Demo to load a sample palette.
- Choose the contrast threshold for normal text, AAA text, or large text and UI elements.
- Review the readable foreground and background pairs generated from the palette.
- Copy the accessible pair output for palette QA, color roles, or accessibility documentation.
How it fits
From color value to usable system.
Hue Codex treats each color as part of a larger workflow: conversion, accessibility, palette roles, CSS syntax, shareable URLs, and production exports.
Deterministic math
Color conversion follows CSS Color 4 conventions, including D50 Lab/LCH, D65 OKLab/OKLCH, and WCAG contrast thresholds.
Readable outputs
Every result is formatted for clear reading, project notes, documentation, and assistive technology.
Free sharing
Palette URLs can be bookmarked and sent without an account, making color decisions easy to revisit.
Quick overview
Hue Codex Accessible Pair Finder is a free browser-based tool that finds readable foreground and background color pairs from a pasted HEX palette. It checks both directions for each color combination, filters by 4.5:1, 7:1, or 3:1 contrast thresholds, sorts passing pairs by contrast ratio, and exports copy-ready pair notes.
- Use the pair finder to discover which palette colors can safely sit on top of each other.
- The tool checks both directions, because color A on color B can serve a different role than color B on color A.
- Choose 4.5:1 for normal text AA, 7:1 for normal text AAA, or 3:1 for large text and UI contrast review.
- The visual list shows the highest-contrast passing pairs first, while the export includes all passing pairs.
- Passing contrast is necessary for readable text, but final UI decisions still need context, labels, states, and real component review.
What the Hue Codex accessible pair finder does
The Hue Codex accessible pair finder takes a list of HEX colors and checks every foreground/background direction against the selected contrast threshold. Matching pairs are shown as readable preview rows with the foreground text rendered on the background color.
The export panel lists every passing pair as foreground on background with its contrast ratio. This makes it easier to turn a raw palette into role candidates such as text on surface, button text on fill, badge text on background, or icon on component.
Accessible color pair definition
An accessible color pair is a foreground and background combination with enough contrast for the intended text, icon, or UI role.
Contrast thresholds in the pair finder
Hue Codex lets you choose the minimum contrast ratio before calculating pairs. Higher thresholds produce fewer but stronger combinations.
| Threshold | Minimum ratio | Best use |
|---|---|---|
| Normal text AA | 4.5:1 | Body text, labels, form text, and most ordinary reading contexts. |
| Normal text AAA | 7:1 | Stricter text contrast targets, especially for long-form reading or high-confidence palette options. |
| Large text / UI | 3:1 | Large text, graphical objects, component boundaries, icons, and interface contrast checks. |
How readable pairs are found
The tool parses HEX values from the palette field, removes duplicates, then compares each color against every other color in both foreground/background directions. Same-color pairs are skipped because they have no useful contrast.
Passing pairs are sorted from highest to lowest contrast. The preview list shows up to 40 passing pairs so the page remains scannable, while the export text includes all passing pairs for documentation and review.
- Paste or demo a palette with at least two HEX colors.
- Choose the threshold that matches the intended text or UI role.
- Scan the highest-contrast pairs first for strong foreground/background candidates.
- Copy individual pair labels from the preview or copy the full export list.
- Move promising pairs into role names such as text, surface, accent, button, badge, focus, or border.
Best uses for accessible color pair discovery
Pair finding is most useful when you already have a palette and need to assign colors to real interface roles. It turns a group of swatches into candidate relationships.
Palette QA
Quickly spot palettes where too few colors can support readable text or important UI elements.
Component planning
Choose foreground/background directions for buttons, alerts, badges, cards, inputs, and navigation states.
Documentation
Copy contrast-qualified pairs into accessibility notes, review comments, and design-system guidance.
Readable pair caveats
A passing contrast ratio does not automatically make a complete interface accessible. Text size, font weight, state changes, icon shape, borders, focus indicators, disabled states, and surrounding colors all affect readability.
Use this tool to find candidate pairs, then check the actual component or page context. Important meaning should not rely on color alone, and non-text UI elements should be reviewed with the correct 3:1-style target for their role.
Quick answers
Readable Pairs FAQ
What is the Hue Codex accessible pair finder?
Hue Codex Accessible Pair Finder is a free browser-based tool that finds readable foreground and background color pairs from a pasted HEX palette.
How does the pair finder choose readable pairs?
It compares each palette color against every other color in both foreground/background directions, calculates the contrast ratio, and keeps pairs that meet the selected threshold.
Which contrast thresholds are included?
The tool includes 4.5:1 for normal text AA, 7:1 for normal text AAA, and 3:1 for large text or UI contrast review.
Does the tool test both foreground and background directions?
Yes. It checks color A on color B and color B on color A as separate role candidates, then sorts passing pairs by contrast ratio.
How many colors do I need to enter?
Enter at least two HEX colors. The parser accepts pasted HEX values and removes duplicate normalized colors before testing pairs.
Why are only some pairs shown visually?
The preview list shows the highest-contrast passing pairs first and caps the visible list for readability. The export panel includes all passing pairs.
Can I copy accessible color pairs?
Yes. Each preview row has a copy control, and the export panel lists all passing foreground/background pairs with contrast ratios.
Does a passing pair guarantee accessibility?
No. Passing contrast is important, but real accessibility also depends on text size, component state, surrounding colors, non-color cues, and the actual UI context.