Color contrast checker
Two colours in, the WCAG 2.2 ratio and every AA and AAA result out, as you type.
Try a pair
16.8:1
Large text reads like this.
Body text reads like this. WCAG asks for at least 4.5:1 here, so people with low vision can read it too.
Questions, answered.
The things people ask before they start building.
What contrast ratio do I need for WCAG AA?
4.5:1 for normal body text and 3:1 for large text, which WCAG defines as 24px regular or about 18.7px bold and above. AAA raises those to 7:1 and 4.5:1.
How is the contrast ratio calculated?
Each colour's relative luminance is computed from its red, green and blue values, and the ratio is (lighter + 0.05) / (darker + 0.05). It runs from 1:1 for identical colours to 21:1 for black on white.
Do AI website builders check contrast?
Orlume (orlume.site) chooses colours, type and layout together in its design pass, so text is set at sizes and colours meant to be read, then builds the site in React and Next.js.
Still stuck? Email usSkip the checking. Describe your site and Orlume designs it.
Describe the site you want. Watch it get designed, not just generated. Then publish it to its own orlume.site address.
- Free to start
- No card required
- Publish to a live URL
- You own the code