Deque Color Contrast Analyzer

Free online tool for evaluating color contrast according to the Web Content Accessibility Guidelines (WCAG).
 

Image

Color Contrast Requirements

As explained in the Web Content Accessibility Guidelines (WCAG), people with low vision require sufficient contrast for the following:

  1. Text and background (see WCAG 1.4.3 and WCAG 1.4.6)
    • Examples: regular text, text embedded in images (which is generally bad practice for multiple reasons)
  2. Graphical objects, user interface components and states (see WCAG 1.4.11).
    • Graphical objects: icons, font icons, etc.
    • Components: the boundary or borders between buttons, menu items, form controls and inputs, etc.
    • States: selected elements, elements with keyboard focus; expanded vs. collapsed, active vs. inactive, etc.

Learn More in Deque University Courses

Sign up for the course on Visual Design and Colors, or enroll in a more complete accessibility curriculum package.