Accessible Color Pair Finder
Check WCAG 2.x color contrast between a foreground and background color: get the exact contrast ratio, pass/fail for AA and AAA at normal and large text sizes, and a suggested accessible foreground color when the pair fails.
Input
The color of the text.
The color behind the text.
Output
| Metric | Value |
|---|---|
| No data yet | |
Closest lightness adjustment of your foreground color that passes WCAG AA for normal text. Unchanged if your pair already passes.
Guides
Pick a foreground and background color, and this tool checks whether the pair meets the Web Content Accessibility Guidelines (WCAG) contrast requirements — the standard used by accessibility audits, Lighthouse, and most legal digital-accessibility requirements (ADA, EN 301 549, Section 508).
What is WCAG color contrast?
WCAG 2.x defines two formulas. First, relative luminance — how bright a color appears, weighted by how the human eye perceives red, green and blue (L = 0.2126×R + 0.7152×G + 0.0722×B, using linearized sRGB channels). Second, the contrast ratio between two colors — (L1 + 0.05) / (L2 + 0.05), lighter luminance over darker — which ranges from 1:1 (identical colors) to 21:1 (pure black on pure white).
WCAG sets minimum ratios for text to be legible for people with low vision or color-vision deficiencies:
- AA, normal text: 4.5:1
- AA, large text (≥18pt, or ≥14pt bold): 3:1
- AAA, normal text: 7:1
- AAA, large text: 4.5:1
AA is the bar most sites target — it's what accessibility audits and most legal standards require. AAA is stricter and mainly relevant for government or high-accessibility products.
How to use it
- Pick your foreground (text) color — type a hex value or use the picker.
- Pick your background color.
- The results table updates instantly with the exact contrast ratio and a pass/fail badge for all four thresholds (AA/AAA × normal/large).
- If your pair fails AA for normal text, the tool also computes a suggested accessible foreground — the closest lightness adjustment to your original color (darker or lighter, whichever is a smaller visual change) that clears the 4.5:1 bar while keeping the same hue and saturation.
FAQ
Why does the same pair sometimes pass for large text but fail for normal text? Larger, bolder text is easier to read at lower contrast, so WCAG relaxes the ratio to 3:1 (AA) or 4.5:1 (AAA) for text at least 18pt, or 14pt bold.
Does color-blindness affect this? Contrast ratio is a luminance calculation, not a color-difference calculation, so it holds up reasonably well across common forms of color-vision deficiency — but it doesn't replace checking that information isn't conveyed by hue alone (e.g. "red = error" needs an icon or label too).
Why is my suggested foreground not the same hue I typed? It is the same hue and saturation — only the lightness changes, in whichever direction (toward black or toward white) reaches 4.5:1 with the smallest shift from your original color.
What if I want AAA compliance instead? Check the AAA rows in the results table. The suggested-color feature currently targets AA normal text (4.5:1), the threshold most audits use; a color that meets AA doesn't always meet AAA.
Is my color data sent anywhere? No — every calculation runs entirely in your browser. Nothing is uploaded or stored.