logo Contrast at a Glanceby Jenniina
Language

WCAG Contrast Checker Tool

See color contrast accessibility at a glance

Contrast at a Glance is an easy-to-use tool for testing how well colors work together from an accessibility point of view. It shows at a glance whether your color combinations have enough contrast for text and interface elements, making it easier to create designs that more people can read and use.

Symbol meanings

  • Best fit: The big filled round indicator marks the highest AAA-compatibility for small text
  • Minimum compatibility for small text: The hollow round indicator marks AA-compatibility for small text.
  • The lowest compatibility for only UI and other graphical elements is marked by a small hollow square
  • Bad fit: The colors are not compatible with each other; The contrast is not sufficient
Select color mode for generating new colors
  • Skip to next color
    Move
    hsl(200, 50%, 10%)
    Select color format
  • Skip to previous color Skip to next color
    Move
    hsl(200, 50%, 35%)
    Select color format
  • Skip to previous color Skip to next color
    Move
    hsl(200, 50%, 75%)
    Select color format
  • Skip to previous color
    Move
    hsl(200, 50%, 90%)
    Select color format

Contact

Get in touch

Contact Form Part 1 / 2
Basic Details

Name