Skip to content
QuickToolio
esEspañolenEnglishptPortuguêsfrFrançaisdeDeutschitItaliano

Check color contrast (WCAG)

Check whether a text/background color combination meets the AA and AAA contrast levels from the WCAG 2.x accessibility guidelines.

Processed on your device. Nothing is sent to any server.
Sample text

16.85:1

  • AA normal text (4.5:1)Pass
  • AA large text (3:1)Pass
  • AAA normal text (7:1)Pass
  • AAA large text (4.5:1)Pass

Calculates the relative luminance of each color per the WCAG formula and derives the contrast ratio between them, comparing it against the 3:1, 4.5:1 and 7:1 thresholds.

Use cases

  • Verifying that a button or text is readable before publishing.
  • Auditing an interface's accessibility.
  • Choosing brand colors that meet WCAG AA.

How it works

  1. 1

    Pick text and background colors

    Enter both colors in HEX.

  2. 2

    Check the ratio

    See the contrast ratio and which WCAG levels it meets.

Frequently asked questions

What's the difference between AA and AAA?

AA is the recommended minimum level (4.5:1 for normal text); AAA is stricter (7:1) and recommended for critical content.

What counts as large text under WCAG?

Text of at least 18pt, or 14pt bold, which has a lower contrast threshold (3:1 under AA).

Related tools

← Colors & design