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