Colour Blindness & Web Design

Colour vision deficiency (colloquially colour blindness) means certain colours cannot be distinguished, or only with difficulty; according to the National Eye Institute about one in twelve men is affected, women far less often. For web design this means information, errors or calls to action must never be conveyed by colour alone – as WCAG success criterion 1.4.1 "Use of Color" (level A) requires.

In practice

A required field marked in red also needs an icon, the words "(required)" or an asterisk, so the information still comes across without colour perception. Charts should use patterns, shapes or direct labels alongside colour. For testing, tools such as the Chrome DevTools feature "Emulate vision deficiencies" or Color Oracle simulate different forms of colour vision deficiency, so designs can be checked for sufficient contrast and distinguishability without colour before launch.

Matching service

Sources

← Back to the glossary