Accessibility - Color Contrast
Overview
Users, including users with visual disabilities, must be able to perceive content on the page. Color cannot be used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. Sufficient contrast must exist between the text and background.
Definitions/Glossary
Hex Color: This is a “hexadecimal” format where the red/green/blue values are presented as a combination of six letters or numbers. Typically called “Hex,” this is a very common format in webpages.
RGB Color: The amount of red, green, and blue that form a color are each presented as a number between 0 and 255.
HSL Color: Hue, saturation, and lightness map more closely to the way people perceive colors. Changing the “lightness” of a color will change its contrast ratio to another color.
Minimum Compliance
The visual presentation of text and images of text must have a minimum contrast ratio of at least 4.5:1 when measured by a color checker (see below).
Examples
Exceptions/Considerations/Notes
Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
Logotypes: Text that is part of a logo or brand name has no contrast requirement.