Skip to content

Colour contrast checker

Calculate the WCAG contrast ratio between text and background colours and check AA and AAA levels.

AvailableIn your browserInput: Text

How to use: Colour contrast checker

  1. Enter the text and background colours (HEX, rgb() or hsl()) or pick them.
  2. Read the contrast ratio.
  3. Check AA and AAA for normal text, large text and components.

What it accepts and what you get

Input
Two colours; the background must be opaque.
Output
The contrast ratio and AA/AAA results with a preview.
Where your data is processed
Your data is processed in your browser and is not sent to our servers.

Limitations and notes

  • It uses the WCAG 2.x formula; the ratio is truncated to two decimals and never rounded up.
  • Actual font weight and background images are not considered.

Suggested next steps

Related tools