Skip to content
WeaveAI Tools
Your tools

Colour contrast checker

Runs on your device

Check text and background colours against WCAG 2.2 AA and AAA, and get the nearest passing colour in the same hue.

Large text: 24 px bold

Normal text at 16 px, the size most body copy uses. The quick brown fox jumps over the lazy dog.

4.83:1

  • Normal text, AAneeds 4.5:1
  • Normal text, AAAneeds 7:1
  • Large text, AAneeds 3:1
  • Large text, AAAneeds 4.5:1
  • Icons and bordersneeds 3:1

Closest text colours that pass, keeping the same hue:

How to use Colour contrast checker

  1. Enter the text colour and the background as hex, rgb() or hsl(), or pick them.
  2. Read the contrast ratio and which WCAG levels it passes.
  3. If it fails, select a suggested colour: the closest shade of the same hue that passes.

Check contrast the way audits do

Low-contrast text is the most common accessibility failure on the web: pale grey body copy, white text on light brand colours, placeholder text nobody can read in sunlight. WCAG 2.2, the standard that accessibility laws and audits refer to, sets minimum contrast ratios between text and its background. This tool calculates the ratio for any pair of colours and shows which levels it passes: AA and AAA for normal and large text, and the 3:1 minimum for icons, input borders and other interface parts.

Enter colours as hex codes, rgb() or hsl(), including transparency: a semi-transparent text colour is blended over the background first, which is how browsers show it and how the ratio must be measured. A live sample shows the pair at body and heading sizes.

Fixes, not just failures

When a pair fails, the tool suggests the closest colour that passes: the same hue and saturation as your text colour, made just dark enough on a light background, or just light enough on a dark one. That usually keeps the brand look while meeting the standard. Select a suggestion to try it, and copy its hex code into your design tokens or CSS.

Exact thresholds

WCAG compares the exact ratio with the threshold, so 4.49:1 fails AA even though it rounds to 4.5. Some checkers round up and report a pass; this one shows the ratio rounded down, so a failing pair never looks like it passes. Large text means at least 24 px, or about 18.7 px in bold.

About APCA

APCA is a newer contrast method proposed for a future WCAG version. Its reference implementation is published under a licence that doesn't permit us to include it, so this tool checks WCAG 2.2, which remains the requirement today.

Common uses

Checking brand colours before they become a design system, testing button and link colours on light and dark themes, fixing issues raised in an accessibility audit, and choosing a placeholder or disabled-state grey that is still readable for people with low vision.

Questions

What ratio do I need?
WCAG 2.2 level AA asks for 4.5:1 for normal text and 3:1 for large text (24 px, or 18.7 px bold) and for icons, borders and other interface parts. Level AAA asks for 7:1 and 4.5:1.
Why is 4.49 a fail?
WCAG compares the exact ratio with the threshold, without rounding, so 4.499:1 fails AA. This tool shows the ratio rounded down for the same reason, so a failing pair never displays as 4.50.
Does it support APCA?
Not yet. APCA is a proposed method for a future WCAG version, and its reference code's licence doesn't allow us to include it. WCAG 2.2 is the standard laws and audits use today.