Contrast ratio
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
On this page
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
Related terms
- Design tokensDesign 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.
- Alt textAlt 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.
- Responsive designResponsive 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.