Skip to content
Malouf Developer Docs

WCAG/ADA - THE COLOR/CONTRAST ONE

Colors and Contrast standards for WCAG 2.1+ AA

A, AA, and AAA?

These are just the varying levels of standards in the WCAG with A being the lowest and AAA being the highest. In order to hold a higher standard level, A site needs to meet pass ALL of the qualifications of that level and below.

  • AA Sites need to meet all AA and A standards
  • AAA Sites need to meet all AAA , AA, and A standards

Contrast

1.4.3 CONTRAST(minimum) and 1.4.6 CONTRAST(enhanced)

For content to be visually perceived by those with visual impairment, a contrast minimum has been set for different components. Here is the ratio and standard they apply to for the following elements:

ContrastAAAAA
Text4.5/17/1
Large Text*3/14.5/1
UI Componentes3/1-
Graphical Objects**3/1-

*Large Text is defined as 18pt or 14pt BOLD or greater (1.5em or 1.2em BOLD)

**Graphical Objects are parts of an image required to understand the content

Content not required to pass the minimum contrast levels

  1. LogoTypes (text used in logos)
  2. Incidental elements:
    • Inactive or not Visible
    • Decorative
    • Part of a picture that contains significant other visual content

Use of Color

Perceivable: 1.4.1 USE OF COLOR

  • Level A standard

Color CANNOT be the only method of conveying information. This is not just for those with permanent Colorblindness (~3.7% of the population) but also help those with any temporary Color & Visual impairments (Light glare on screen, Improper screen color adjustments, overexposure to light, Not wearing glasses, etc.)​

Examples:

Bad Examplegood Example
<input>
TeaRex@gmail
TeaRex@gmail
*please provide a valid email address
status✓
graphs
light-blue = ??teal = ???
= ?? = ???
linkscheck out this link herecheck out this link here

Techniques for success

  • Make sure the Information is also available through text
  • Addition of other visual cues
  • Use of a pattern to differentiate the colors
  • If color is the ONLY method available, make sure it has a minimum contrast ratio of 3/1 between the changing colors

Tools & Plugins

  • color.review
    • Great visualization tool for contrast in colors and achieving different standard levels.
  • A11y Rocks :: Color Palette
    • A tool for comparing all of your palette’s color combinations and at what standard levels they fall.
  • Accessibility Insights
    • If you haven’t already installed this extension, you should probably give it a go. A browser extension that allows you to test for any WCAG failures on the current page. Not the best testing service out there but a great way to visualize the errors as well as other diagnostic tools.
  • Silktide
    • A screen reader/ visual disability extension. One of the better screen readers I’ve come across that doesn’t just auto read and can actually turn off (I’m looking at you chrome vox). On top of that, It has other visual disibility settings such as dyslexia, colorblind filters, poor vision, and tunnell vision settings.
  • ChromeLens
    • A colorblind extension that allows you to view your page through different visual impairment filters.
  • Resources - The A11Y Project
    • A library full of extensions, tools, and additional rescources for developing with accesibility in mind.