Are there different contrast ratio requirements for text and for UI elements?
Question
I want to make sure that my site uses proper contrast ratios. Are there different contrast ratio requirements for text and for UI elements?
Answer
Yes, there are different contrast ratios for text and for UI elements and the ratios depend on which level of WCAG conformance you would like to achieve:
WCAG Level AA
- Text - the contrast ratio of text must be at least 4.5 to 1 for regular text, and 3:1 for large text (18pt+ or 14pt+ bold)
- Non-text elements - the contrast ratio must be at least 3:1 for user interface components (links, buttons, widgets) and graphics (charts, diagrams, illustrations, etc.). The 3:1 contrast ratio also applies to:
- Mouseover state
- Focused (tab) state
- Selected state
WCAG Level AAA
- Text - the contrast ratio of text must be at least 7 to 1 for regular text, and 4.5 to 1 for large text (18pt+ or 14pt+ bold)
- Non-text elements - the same ratios as outlined above for Level AA apply
Free Tools to Continue Learning
Accessible Web RAMP
Monitor your website and manage your progress towards WCAG conformance.
Accessible Web Academy
Career specific courses to help power up your accessibility knowledge.