Home › Colors & Design › Contrast Checker
⚖️

Contrast Checker

Test colour combinations against WCAG AA and AAA accessibility standards — with Toolify brand colour presets built right in.

📖 How to use this tool

  1. Pick a Foreground colour using the swatch grid, colour picker, or HEX field.
  2. Pick a Background colour the same way.
  3. Or click a Brand Colour Pair shortcut to load a ready-made Toolify combination.
  4. Read your contrast ratio and check the WCAG AA / AAA pass / fail badges below.
  5. Use ⇅ Swap to quickly flip foreground and background.
⚡ Toolify Brand Colour Pairs
Foreground (text)
Brand colours
Background
Brand colours
Live Preview
Heading text — Toolify
Normal body text looks like this at a comfortable reading size. Good contrast is essential for readability.
Small print — 12px / 0.75rem. Harder to read, needs higher contrast.
—
Contrast Ratio

What do the WCAG levels mean?

AA — Normal text (4.5:1)
Minimum for body text under 18pt. Required for WCAG 2.1 Level AA compliance.
AA — Large text (3:1)
For text 18pt+ or 14pt bold. Large text needs a lower ratio.
AAA — Normal text (7:1)
Enhanced accessibility. Recommended for critical or long-form content.
AAA — Large text (4.5:1)
Enhanced standard for large text such as headings.

Frequently Asked Questions

WCAG stands for Web Content Accessibility Guidelines — international standards published by the W3C explaining how to make web content accessible to people with disabilities, including those with low vision or colour blindness.
For WCAG 2.1 Level AA (the most common legal standard), you need 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). For Level AAA (enhanced), the requirements are 7:1 and 4.5:1 respectively.
Around 1 in 12 men and 1 in 200 women have some form of colour vision deficiency. Poor contrast makes text hard to read for these users and for anyone in bright sunlight or on a low-quality screen. Good contrast helps everyone.
Toolify uses a dark theme built around a deep navy background (#0F1117), with a purple primary accent (#6C63FF), teal secondary accent (#00D4AA), and a soft white foreground (#F0F4FF). Each category also has its own accent colour used for icons and headings.