Check colour contrast for WCAG

Score a text and background pair against WCAG 2.1 AA and AAA, and convert the colour between HEX, RGB, HSL and OKLCH while you are there.

Open this example in Color Converter

Open the tool, then paste the sample input below. Everything runs locally in your browser.

Open this example in Color Converter →

The problem

Brand colours are chosen on a designer's screen and audited on someone else's. "Looks readable" is not a standard - 4.5:1 is, and a pair that misses it by 0.15 fails an accessibility audit just as surely as one that misses it by five.

Sample input

Foreground and background
#7c5cff
#ffffff

Expected output

Contrast result
Contrast ratio:      4.35:1
AA normal text:      fail  (needs 4.5:1)
AA large text:       pass
AAA normal text:     fail
UI components:       pass

How to do it

  1. Put the text colour on the first line and the background colour on the second.
  2. Read the ratio and the pass/fail grade for each WCAG threshold.
  3. Darken or lighten one of the colours and re-check until AA passes.
  4. Copy the fixed value in whichever notation your stylesheet uses.
  5. Use the Tints & shades tab to pick a step that passes rather than guessing.

Common mistakes

  • Testing only the largest heading and assuming body text passes too.
  • Forgetting that placeholder text, disabled states and icons also need contrast.
  • Comparing against the wrong background - a card surface rather than the page.
  • Rounding 4.4 up to "close enough" when the threshold is 4.5.

Related tools

FAQ

What contrast ratio passes WCAG AA?

4.5:1 for normal text and 3:1 for large text (18pt, or 14pt bold). AAA requires 7:1 for normal text.

Does the order of the two colours matter?

No. The contrast ratio is symmetric, so swapping foreground and background gives the same number.

What is OKLCH and why is it offered?

A perceptually uniform colour space: two colours with the same lightness value look equally light, which makes building a consistent palette far easier than in HSL.

Is my palette uploaded?

No. Colour conversion and contrast scoring run locally in your browser.

This guide uses browser-local tooling. Avoid pasting production secrets unless you understand what the tool displays and shares.

Explore related tools

Continue with adjacent browser-based tools for the same workflow.

View data cleanup tools →

Check colour contrast for WCAG: quick answer

Use this when an accessibility audit quotes a contrast ratio, or before shipping a new brand colour for body text. Paste the two colours, read the AA and AAA verdicts, and adjust one of them until the pair passes at the size you actually use.

What to verify

Check body text, secondary text, placeholder text and any icon or border that carries meaning. Confirm the background you tested against is the surface the text really sits on, including in dark mode.

Recommended next steps