Skip to content
toolsdocks

Check text and background contrast

Enter a text colour and a background colour in hex, rgb(), hsl() or oklch(). The ratio and the AA and AAA results for normal and large text update as you type.

Runs on your device
Loading tool…

How to use

  1. Enter text and background colours.
  2. Read the ratio and pass/fail for each level.
  3. Use a suggested colour that passes while staying close to yours.

Worked example

#767676 on white is 4.54:1, which passes AA for normal text (4.5:1) but fails AAA (7:1).

Supported formats and limits

InputTwo colours (hex, rgb, hsl, oklch)
OutputRatio, pass/fail, suggestions
EngineWCAG 2.x relative luminance formula

Limitations

  • Contrast ratio is one part of readability; font weight and size also matter.
  • A passing ratio for one colour pair is not an accessibility certification for a page or site.

Questions

What ratios are needed to pass?

WCAG AA needs 4.5:1 for normal text and 3:1 for large text; AAA needs 7:1 and 4.5:1. #767676 on white is 4.54:1, so it passes AA for normal text but fails AAA.

How are the suggested colours chosen?

The tool changes only the OKLCH lightness of the text or the background colour, keeping the hue, until the target ratio is reached, and offers the nearest lighter and darker options.

Does a pass mean my site is accessible?

No. It checks one colour pair. Accessibility also depends on structure, keyboard use, focus states, alternative text and more; use the accessibility checker and manual testing for those.

Guides

Privacy

Runs on your device. Files and text are processed in this browser tab and are not uploaded.

See the privacy policy for how toolsdocks handles data.