zero·style

Dictionary entry

color contrast

View related-term graphUse in a brief
Was this helpful?
UI / UXCurated · verified

The difference in lightness between text or an icon and the color behind it. Enough contrast makes words easy to read; too little makes them hard to see, especially for people with low vision.

Synonyms

Related terms

In plain words

  • how much the text stands out from its background
  • text being dark enough against the background to read

Usage example

The pale grey text failed the color contrast check, so they darkened it to meet the minimum ratio.

Don't confuse with…

  • hueTwo colors can differ a lot in hue yet still have poor contrast if they're similarly light or dark; contrast depends mainly on lightness, not the color itself.

Categories

  • Accessibility

Related-term graph

Two hops from color contrast — click a term to open its entry, or re-center the graph on it

Focus term

Directly related

Two hops away

  • Synonymcolor contrast synonym of contrast ratio
  • Relatedcolor contrast related of focus indicator
  • Relatedcolor contrast related of readability
  • Relatedcolor contrast related of wcag
  • Relatedcontrast ratio related of accessibility
  • Relatedwcag related of accessible name
  • Relatedwcag related of alt text
  • Relatedwcag related of color contrast
  • Relatedcontrast ratio related of color palette
  • Relatedreadability related of content design
  • Relatedwcag related of keyboard navigation
  • Relatedfocus indicator related of keyboard navigation
  • Relatedfocus indicator related of non-text contrast
  • Relatedreadability related of plain language
  • Relatedcontrast ratio related of readability
  • Relatedfocus indicator related of reading order
  • Relatedreadability related of scannability
  • Relatedfocus indicator related of skip link

Stop describing. Start naming.

Turn a plain-language description into a designer-ready brief in minutes.

Start a brief