Contrast Checker
← All toolsSet a text color and a background color and hueshift computes the exact WCAG contrast ratio, then checks it against all four pass thresholds — AA and AAA, at normal and large text sizes.
Aa — The quick brown fox
Sample body text at this size and weight
21.00:1contrast ratio
How to use the Contrast Checker
- Set the Text color and Background color, either by clicking the swatches or typing a HEX value.
- Read the live preview to see how the pairing actually looks.
- Check the ratio and the four pass/fail badges below it.
- Use Swap colors to instantly flip which color is text and which is background.
FAQ
- What ratio do I need?
- WCAG 2.1 requires 4.5:1 for normal text and 3:1 for large text (18pt+, or 14pt+ bold) to meet AA. AAA raises that to 7:1 and 4.5:1 respectively.
- How is the ratio calculated?
- Using the WCAG relative luminance formula on both colors' sRGB values, then (L1 + 0.05) / (L2 + 0.05) with the lighter color as L1 — the same math browsers' accessibility inspectors use.
- Is 21:1 the maximum possible?
- Yes — that's pure black text on pure white (or vice versa), the widest possible contrast in sRGB.
- Does this account for color blindness?
- No — WCAG contrast ratio measures luminance difference, not hue distinguishability. For color-blind-safe palettes, also avoid relying on hue alone to convey information.