contrast
GUIDELINES 1.4.3
Overview
Contrast focuses on allowing sighted users to be able to see text on a background. The key is making this text readable, as some users are unable to see certain colors on others. This guideline goes over how to create a page with this in mind, as well as gives insights on how, when. and why contrast ratio is important.
Who is impacted?
Users with color vision deficiency are primarily impacted. Others with low vision conditions, color blindness, or visually impaired can also be impacted.
How to test?
Take the color codes of the foreground and background color. The contrast ratio of these colors should be at least 4:5:1 for normal text, and 3:1 for large text.
Resources
Text
The visual presentation of text and images of text should have a contrast ratio of at least 4:5:1. The only incidents where this is not necessary are:
Large text: Large scale text and images of large-scale text have a contrast ratio of at least 3:1. This is because text that is larger and has wider character strokes is easier to read at lower contrast.
Incidental: Text or images of text are part of an inactive user interface component. In other words, used purely for decoration that are not visible to anyone, or are part of a picture that contains other significant visual content.
Logotypes: Text that is part of a logo or brand name has no contrast requirement.
The minimum contrast ratio applies to text on the page. This includes placeholder text, and text that is shown when a pointer is hovering over an object or object that has keyboard focus.
In some cases, there are people who do not use contrast-enhancing assistive technology. In this case, the contrast ratio should be at least 7:1 for normal-sized text, and at least 4:5:1 for large text.
Non-text
Content that would be considered non-text would be content such as controls, charts, graphics, diagrams, and other non-text-based information.
There is no requirement for controls to have a visual boundary indicating a hit area, but if that visual indicator is the only way to identify the control, then that indicator must also have sufficient contrast.
Non-text content requires a contrast ratio of minimum 3:1.