Contrast Checker
Check the WCAG 2.x contrast ratio of text and background colours, see AA and AAA results, APCA Lc, and get the nearest passing colour.
This guide is not yet available in your language and is shown in English.
Tool guide
What this tool does
Contrast Checker measures how readable a text colour is on a background using the WCAG 2.x contrast ratio, shows pass or fail for normal text, large text and UI components, and adds the APCA lightness contrast for reference. If a pair fails, it suggests the closest lighter or darker colour that passes.
Low-contrast text is one of the most common accessibility failures on the web. Light grey body text or white text on a pale brand colour may look elegant on a designer's screen but becomes unreadable on a phone in daylight and for the many people with reduced vision or colour vision deficiency.
This checker computes the WCAG 2.x contrast ratio (L1 + 0.05) / (L2 + 0.05) from the relative luminance of both colours, and compares it with the thresholds in success criteria 1.4.3, 1.4.6 and 1.4.11. Ratios are never rounded up, so 4.49:1 fails AA. It also shows the APCA lightness contrast (Lc), the candidate method for future guidelines, as extra guidance. When a pair fails, it searches along OKLCH lightness for the closest colour that reaches your target while keeping the hue.
How to use Contrast Checker
- Enter the Text colour and the Background colour in any CSS format, or use the colour pickers.
- Read the Contrast ratio and the pass or fail badges for each WCAG level.
- Check the preview with headings, body text, small print, buttons and icons.
- Use Swap colours to test the inverse, for example white text on a coloured button.
- Under Fix the contrast, choose a Target ratio and press Use on the suggested text or background colour.
Tips for better results
- Large text means at least 24 px regular or 18.66 px (14 pt) bold; it only needs 3:1 for AA.
- Icons, input borders and focus indicators need 3:1 against adjacent colours under SC 1.4.11.
- Placeholder text is still text: if it conveys information, it must meet 4.5:1 too.
- For semi-transparent text, the colour is blended over the background first, exactly as a browser renders it.
Common use cases
- Auditing a design system or brand palette for accessible text and button colours.
- Checking hover, disabled and link colours before release.
- Fixing failures reported by an accessibility audit or Lighthouse.
- Choosing readable text colours for charts, slides and social graphics.
Common mistakes to avoid
- Testing only the default state and forgetting hover, focus, visited and disabled styles.
- Measuring text on an image or gradient by its average colour; test the lightest and darkest areas behind the text.
- Treating APCA scores as a legal requirement; WCAG 2.2 conformance is still judged by the 2.x contrast ratio.
Frequently asked questions
What ratio do I need?
WCAG 2.x AA requires 4.5:1 for normal text and 3:1 for large text and meaningful graphics. AAA requires 7:1 for normal text and 4.5:1 for large text. Pure black on white is the maximum, 21:1.
What is APCA?
The Accessible Perceptual Contrast Algorithm estimates readability with a lightness contrast value (Lc) that depends on polarity and is meant to be read together with font size and weight. It is shown here as information; it is not yet part of a published WCAG standard.
Why does white text on orange fail when it looks readable?
The WCAG formula is known to judge some mid-tone colours strictly, especially with white text. The ratio is still the legal benchmark for WCAG 2.x conformance, so choose a darker shade or dark text.
How are the suggestions calculated?
The tool keeps the hue and chroma of your colour in OKLCH, steps the lightness up and down in 0.5% increments and returns the first colour in each direction that meets the target, choosing the one closest to the original.
Related articles
Feedback & suggestions
Help us improve Contrast Checker. We read every message.