ximg.es

WCAG contrast checker

Pick the text and background colours to see whether they are readable according to the WCAG accessibility guidelines. If they fail, it suggests the closest colour that passes.

Contrast ratio4.54:1

  • AA · normal text ≥ 4.50:1 Pass
  • AA · large text ≥ 3.00:1 Pass
  • AAA · normal text ≥ 7.00:1 Fail
  • AAA · large text ≥ 4.50:1 Pass
  • Icons and controls ≥ 3.00:1 Pass

Preview

Sample large text

This is how a paragraph of normal text reads with these colours. If it’s hard to read here, it will be harder on a phone in bright sunlight.

Small text, like a note or a caption.

ximg.es image with the chosen background and text colours
https://ximg.es/600x300/ffffff/767676.png

What the contrast ratio measures

It compares the luminance of the text with that of the background, on a scale from 1:1 (the same colour) to 21:1 (black on white). It doesn’t depend on hue: a red and a green with the same luminance have very low contrast even though they look very different, and that is exactly the pair colour-blind people can’t tell apart.

AA and AAA levels

The ratio isn’t rounded: 4.49:1 fails AA even though it’s a hundredth short. That’s why the lightest grey that passes AA on white is #767676 (4.54:1), and #777777 no longer makes it.

How to fix insufficient contrast

The simplest fix is to darken the text (or lighten it, if the background is dark) without changing the hue, which is what the tool’s suggestion does: it keeps the brand colour and only adjusts the lightness. If the colour can’t be touched, use it on large elements such as headings or button backgrounds, and keep small text in a higher-contrast colour.

Text over images

The contrast of text over a photo changes from point to point, and no tool can guarantee it. The safe approach is to put a semi-transparent colour layer or a gradient between the photo and the text, and check the worst case. The preview uses an image from the ximg.es generator with the same colours, so you can see how a placeholder’s text looks: 

https://ximg.es/600x300/{background}/{text}.png?text=Hello

Frequently asked questions

What is the minimum contrast WCAG requires?

4.5:1 for normal text and 3:1 for large text at level AA, which is the one most regulations require. Level AAA raises it to 7:1 and 4.5:1.

What counts as large text?

From 24 px (18 points) at normal weight, or from 18.66 px (14 points) in bold.

What is the lightest grey that passes AA on white?

#767676, with a ratio of 4.54:1. It’s the grey often used for accessible secondary text.

Is WCAG compliance mandatory?

For the European public sector, yes, and has been for years. Since June 2025 the European Accessibility Act extends it to many private services, such as e-commerce and banking, which must meet level AA.

Does contrast apply to logos?

No. WCAG excludes logos and purely decorative text, as well as text in disabled controls.

What about WCAG 3 and APCA?

WCAG 3 is still a draft and is exploring a different method (APCA) that takes font size and weight into account. Today the legal reference is still WCAG 2.2, which is what this tool uses.

More tools

See all tools · Placeholder image generator