Color contrast checker
Check whether text is readable on a background, against WCAG AA and AAA. If it fails, pick the closest passing color in one click.
How to use it
- Enter a text color and a background color, as hex, rgb(), hsl() or a color name.
- Read the ratio and the pass or fail result for each WCAG level.
- If the pair fails, choose Use this on a suggested text or background color.
- The page address updates, so you can share the exact pair with your team.
How it works
The contrast ratio compares the relative luminance of the two colors, as defined in WCAG 2. It runs from 1:1 for identical colors to 21:1 for black on white.
WCAG AA asks for 4.5:1 for normal text and 3:1 for large text (24px, or about 19px bold) and for icons and interface parts. AAA asks for 7:1 and 4.5:1. Results compare the exact ratio, so 4.49:1 fails AA.
Suggestions keep the hue and saturation and change only lightness, in the OKLCH color space, stopping at the first color that passes. That gives the smallest visible change.
Related tools
Questions
What contrast ratio do I need?
For WCAG AA, 4.5:1 for normal text and 3:1 for large text and interface parts. For AAA, 7:1 for normal text and 4.5:1 for large text.
What counts as large text?
WCAG treats text as large at 24px (18pt) and above, or 18.66px (14pt) and above when bold.
Does passing guarantee my design is accessible?
No. Contrast is one requirement among many. Also check text size, focus states, and that color isn't the only way information is shown.
Does this check APCA?
Not yet. WCAG 3 and its APCA contrast method are still drafts, so this checker uses the current WCAG 2 standard.