Eye icon Contrast at a Glanceby Jenniina
Language

WCAG Contrast Checker Tool

See color contrast accessibility at a glance
  • Colors can be reordered by dragging
  • Hint: organizing the colors in darkest-to-light or lighest-to-dark creates more appealing visuals
  • Save SVG (with or without colorname)
  • Save PNG (with or without colorname)
  • Changing the size will also change the size of the saved file
  • Log in to save color palettes to database
  • If you do not want to register, you can try logging in with the test user account:
    Password:
    Log in

Symbol meanings

  • Line: The colors are not compatible with each other; The contrast is not sufficient
  • The lowest compatibility for only UI and other graphical elements is marked by a small hollow square
  • The hollow round indicator marks AA-compatibility for regular text
  • The big filled round indicator marks the highest AAA-compatibility for regular text
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