# Contrast ratio

URL: https://xodia.ai/glossary/contrast-ratio
Description: What contrast ratio is, the WCAG 2 minimums of 4.5:1 and 3:1, and how Xodia checks every text and background pair in your site's theme for you.
Last updated: 2026-11-08

Contrast ratio measures how much text stands out from its background, from 1:1 (no difference) to 21:1 (black on white); WCAG asks for at least 4.5:1 for body text.

How Xodia checks contrast for you: the design check tests every text and background pair in your theme against WCAG 2, and the Audits panel checks the page you have open.

Updated November 8, 2026

## What it is

Low contrast makes text hard to read for many people, in bright light, on cheap screens and with low vision. WCAG 2 sets 4.5:1 for normal text and 3:1 for large text and for icons and controls.

Light grey text on white and white text on pale brand colours are the usual culprits. Contrast depends on both colours, so a brand colour that works on white may fail on a tinted background.

## In Xodia

Xodia's design check reads your CSS and Tailwind classes, resolves your theme's colours and checks every text and background pair against WCAG 2, counting anything under 3:1 as an error. Your AI's screenshots check the rendered page too.

The Audits panel also checks contrast on the page you have open, and the canvas can simulate colour blindness and blurred vision.

## Read more

- [Checks](https://xodia.ai/product/checks)
- [The visual editor](https://xodia.ai/product/visual-editor)

## Related terms

- [Design tokens Design tokens are the named values a design system is built from, such as brand colours, font families, text sizes and spacing steps, kept in one place and used everywhere.](https://xodia.ai/glossary/design-tokens)
- [Alt text Alt text is a short written description of an image, set in its alt attribute, that screen readers read aloud and that shows when the image can't load.](https://xodia.ai/glossary/alt-text)
- [Responsive design Responsive design is building one website that adapts its layout, images and type to every screen size, instead of making separate sites for phones and desktops.](https://xodia.ai/glossary/responsive-design)

[See every term in the glossary](https://xodia.ai/glossary)

Glossary