WCAG Contrast

AA · AAA · WCAG 2.1 · accessibility

Enter two colours and check whether they meet WCAG criteria. Live preview of text on the background colour and guidance on reaching the required minimum level.

Text color
Text (FG)
Background color
Background (BG)
21.00
contrast ratio
Useful presets

Text-to-background contrast is one of the most frequently audited WCAG requirements: a minimum ratio of 4.5:1 for normal text (level AA) and 3:1 for large text is mandatory in many institutional and public contexts, and represents a best practice for any professional website.

With this tool you can:

  • Calculate the contrast ratio between two colours in HEX, RGB or HSL
  • Check compliance with WCAG 2.1 AA and AAA for both normal and large text
  • View a live preview of text against the background colour
  • Receive concrete suggestions for reaching the minimum level when contrast falls short

Essential for developers building custom WordPress themes from Figma mockups: a designer's approved palette may not meet contrast requirements, and catching this before delivery avoids costly revisions.

How to read the result

  • AA normal text: at least 4.5:1.
  • AA large text: at least 3:1.
  • AAA normal text: at least 7:1.

Use this tool during design and implementation to reduce readability issues and improve practical accessibility.