Colors

Colors are a major part of an accessible website, since it's a core way of conveying meaning and information. There many disabilities and conditions that affect how users perceive color, partially or completely. Accessible color schemes and color design convey the needed meaning despite common disabilities affecting color perception.

Rules Of Thumb

  • Don't convey meaning with only color, since not all users may be able to see it. Using icons, text, or other visual notifiers focused on the same content help get the message across consistently.

  • Give text colors enough contrast. Low-contrast colors are hard to read in many scenarions, including regular users who don't have their glasses or are outside with a glare on their phones. Aim for a contrast ratio between the text and background of:

    • 4.5 to 1 if smaller than 18 pixels

    • 3 to 1 if equal to or larger than 18 pixels

  • Test all used color combinations. A color palette won't use all possible combinations in a site, but each one that is used should be checked for proper contrast. This mostly applies to text, but make sure any meaning conveyed by other contrasts is still noticeable (although this is discouraged).

  • Avoid too much color crammed together. It can quickly get overwhelming and nonsensical, especially for those with cognitive impairments.