How do I use the colour contrast checker (WCAG)?
- Enter the text colour.
- Enter the background colour.
- Press Check contrast and adjust colours that fail.
Colour contrast checker (WCAG): frequently asked questions
What contrast ratio do I need?
4.5:1 for normal text and 3:1 for large text (24px, or 18.66px bold) to meet WCAG AA.
Does contrast affect SEO?
Not directly, but Lighthouse’s accessibility score checks it, and readable pages keep visitors longer.
What contrast ratio does WCAG require?
At least 4.5:1 for normal text and 3:1 for large text and interface elements at level AA.
What counts as large text?
At least 24 px regular or about 18.7 px bold.
What is AAA contrast?
A stricter level: 7:1 for normal text and 4.5:1 for large text.
Does contrast matter for SEO?
Not directly, but accessibility audits flag it, and readable pages perform better.
How do I fix low contrast?
Darken the text or lighten the background until the ratio passes.
Do placeholders need to pass?
Placeholder text should meet contrast if users rely on it, and should not replace labels.
What about text on images?
Check against the lightest area behind the text, or add an overlay.
Is accessibility required in the UAE?
Government websites follow accessibility standards, and accessible design benefits every business.