Okuzeka
UX/UI Design vocabulary · Accessibility

Color contrast

Meaning in UX/UI design, with examples

nounCore term

In UX/UI design, color contrast means: The difference in brightness between text or an icon and its background, which decides how easy it is to see, especially for people with low vision.

In Turkish: renk kontrastı, kontrast oranı

How it is used

Measured as a contrast ratio. WCAG level AA asks for at least 4.5:1 for normal text and 3:1 for large text; level AAA asks for 7:1. Designers test colour pairs with contrast checker plugins.

Example sentences

  1. Light grey text on white fails the colour contrast check.

  2. We darkened the button so the color contrast meets WCAG AA.

Common collocations

  • low color contrast
  • check the contrast ratio
  • meet contrast requirements
  • high-contrast mode
  • accessibilityThe practice of designing products that people with disabilities, such as low vision, blindness, deafness or limited movement, can perceive, understand and use.
  • WCAGShort for Web Content Accessibility Guidelines: the international standard, published by the W3C, that explains how to make websites and apps accessible.
  • color paletteThe fixed set of colours chosen for a product or brand, usually with primary, secondary and neutral colours plus status colours such as red for errors and green for success.
  • visual hierarchyThe use of size, colour, contrast, spacing and position on a screen so that people notice the most important elements first and read the rest in a clear order.

This word in other fields

The same English word can have a different meaning in another field:

More terms: Accessibility

Practise with graded reading

Reading at the right level is the fastest way to make new words stick. Pick free English books by level: