BEAUTIFUL SHOULD ALSO BE READABLE.
Color contrast
checker.
Check WCAG 2.2 AA/AAA contrast, inspect every pair in a palette and repair failing text colors. Exact sRGB ratios, editable examples and JSON reports.
for readability.
This is normal-sized body text. Small details make a big difference.
Opaque sRGB colors · WCAG 2.2 relative luminance
Contrast ratio · pass/fail uses the unrounded value
THE BIGGER PICTURE
Every pair, at a glance.
| Text ↓ / BG → | #C5D9A7 | #F2B58F | #8D79DF | #F4F0E6 | #28362C |
|---|---|---|---|---|---|
| #C5D9A7 | |||||
| #F2B58F | |||||
| #8D79DF | |||||
| #F4F0E6 | |||||
| #28362C |
Each dot shows the row’s foreground color against the column’s background. Select a pair for the text preview above. Large text: at least 24px regular or 18.67px bold. Color contrast alone does not establish WCAG conformance.
FROM A COLOR TO A CLEAR DECISION
Check a color pair or your whole palette
This color contrast checker calculates WCAG 2.2 ratios for opaque sRGB foreground and background colors. It shows normal and large-text AA/AAA results, a complete palette contrast matrix, and a lightness adjustment for a failing text color.
How to use this contrast checker
- Enter a text HEX color and background HEX color. The ratio and four text criteria update when you apply the input.
- Choose the target ratio and select Adjust lightness. Review the suggested text color, then apply it to your palette only when it suits the design.
- Select any cell in the palette matrix to inspect that pair. Download the JSON report to record the exact inputs, ratio and results.
WCAG contrast requirements at a glance
| Text use | AA minimum | AAA minimum |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text | 3:1 | 4.5:1 |
Large text is at least 24 CSS pixels at regular weight, or about 18.67 pixels when bold. Essential non-text controls and graphics have separate requirements; a passing text result is not a complete interface audit.
Why #777777 on white fails AA
The ratio is 4.478089:1, below 4.5:1. Rounding the display must not turn that into a pass. Our lightness search suggests #767676, which measures 4.542225:1 after conversion to HEX.
Relative luminance uses linearized sRGB channels. Contrast is (lighter luminance + 0.05) / (darker luminance + 0.05). Check the resulting 8-bit color after repair, not just an unrounded intermediate color.
Method reference: W3C: Understanding Contrast (Minimum). Read all calculation methods and limitations.
Common questions
Why does a ratio close to 4.5 still fail?
WCAG thresholds are minimum values. The pass/fail decision uses the unrounded ratio. #777777 on white is about 4.48:1 and fails AA normal text.
Can the checker test transparent text or images?
This checker evaluates opaque sRGB pairs. Composite transparency against the actual background first. Images and gradients need checks at each position behind the text.
Does a passing palette matrix mean my site meets WCAG?
No. A matrix tests color pairs. Keyboard access, names, focus, zoom, states, non-text contrast and many other requirements need separate review.
Is this APCA?
No. The reported AA/AAA results use the WCAG 2.2 contrast-ratio formula. The vision simulations elsewhere in Palunio are approximate and do not change this calculation.