Colour Contrast Checker Widget

Add a WCAG colour contrast checker to your design or accessibility guide. Readers enter a text colour and a background, see the contrast ratio with a live sample, get pass or fail for AA and AAA, and are offered the closest text colour that passes.

Design Tool Runs in your browser Free · no ads

Customize your widget

Theme
Auto follows the visitor's light/dark setting.
Style
Attribution on your page
Optional and entirely your choice. The exact line is shown in the code below; it links to the tool with rel="nofollow".
More options
Starting values
Leave blank to use the widget's defaults. Visitors can still change every value.

Live preview

Exactly what your visitors will see

Embed code

<iframe src="https://a2z.tools/embed/w/color-contrast-checker" title="Colour Contrast Checker by A2Z Tools" width="100%" height="680" style="border:0;width:100%" loading="lazy" allow="clipboard-write"></iframe>

A plain iframe. Works everywhere, including site builders that strip scripts. Adjust height if your content needs more room.

Works with

How it works

The widget uses the same WCAG engine as the A2Z Accessibility Contrast Matrix. Each colour is converted to relative luminance with the sRGB curve defined by WCAG, and the ratio of the lighter to the darker luminance (each plus 0.05) is the contrast ratio. The ratio is floored, never rounded up, to two decimals, so 4.499:1 cannot appear as a pass. When normal text fails AA, the widget searches the text colour's lightness, keeping its hue and saturation, for the nearest shade that reaches 4.5:1.

Method

  • Channel c = v / 255; linear = c / 12.92 if c <= 0.04045, else ((c + 0.055) / 1.055)^2.4
  • L = 0.2126 R + 0.7152 G + 0.0722 B (relative luminance, 0 = black, 1 = white)
  • Contrast = (L_lighter + 0.05) / (L_darker + 0.05), from 1:1 to 21:1
  • Shown floored to 2 decimals and compared unrounded, as the Understanding document requires (4.499:1 fails 4.5:1)
  • AA: 4.5:1 normal text, 3:1 large text (24px, or 18.66px bold) and UI components (SC 1.4.11); AAA: 7:1 and 4.5:1

Limitations

  • It measures two flat colours. Text on a photo, a gradient or a patterned background has many contrast values, and the widget cannot see them.
  • Font weight and size are not read from a page: you decide whether your text counts as large (24px, or 18.66px bold).
  • WCAG 2 contrast is the legal and audit reference, but it is known to over-rate some dark pairs; the proposed APCA method for WCAG 3 is not applied.
  • The suggested passing shade changes only lightness; it may drift from a brand colour, so check it with your designer.
  • Colour-vision deficiencies are not simulated - passing contrast does not mean the pair is distinguishable by hue.

Where publishers use it

  • Accessibility tutorials and WCAG explainers
  • Brand and style-guide pages that publish approved colour pairs
  • Web-design agency blogs checking client palettes
  • Design-system documentation next to the colour tokens

Questions

Which WCAG version does it follow?

WCAG 2.0, 2.1 and 2.2 share the same contrast formula and thresholds, and the widget applies them. The newer APCA method proposed for WCAG 3 is not used.

What counts as large text?

At least 24 CSS pixels (18pt), or at least 18.66 pixels (14pt) when bold. Large text needs 3:1 for AA and 4.5:1 for AAA.

Why is #777777 on white a fail?

Its ratio is 4.47:1, just under the 4.5:1 needed for normal text. #767676 reaches 4.54:1 and passes, which is why it is often quoted as the lightest accessible grey on white.

Can I check semi-transparent colours?

Yes. rgba() or 8-digit hex colours are painted over the background first (and a translucent background over white), then measured - the widget notes when it has done this.

Sources

  1. Web Content Accessibility Guidelines (WCAG) 2.2 - definitions of contrast ratio and relative luminance - W3C . W3C Recommendation; the linearisation threshold is 0.04045 (0.03928 before May 2021 - no 8-bit value lies between the two, so results are identical)
  2. Understanding Success Criterion 1.4.3: Contrast (Minimum) - W3C WAI . 4.5:1 and 3:1 thresholds; computed ratios are not rounded
  3. Understanding Success Criterion 1.4.6: Contrast (Enhanced) - W3C WAI . AAA thresholds 7:1 and 4.5:1
  4. Understanding Success Criterion 1.4.11: Non-text Contrast - W3C WAI . 3:1 for user-interface components and graphics

Cite or recommend this tool

If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.

A2Z Tools Colour Contrast Checker
https://a2z.tools/accessibility-contrast-matrix

Related widgets

More Design widgets →

Preview

CustomizeGet code