Requirements

• For text, the contrast between the foreground and background colours needs to have a contrast ratio of at least 4.5:1
• For graphical and user interface compoents, the contrast between the foreground and background colours needs to have a contrast ratio of at least 3:1

Why it matters

• People with low vision (who may have trouble reading the text)
• People with cognitive disabilities that affect reading
• People viewing content in non-ideal environments such as sunny conditions with a lot of glare

Examples of failure

For each target, the highest contrast between the foreground and background colours needs to have enough of a contrast ratio.

Exceptions

There are a few exceptions when looking at colour contrast.

• Brand logos and logotypes
• Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone
• Text that is part of a picture that contains significant other visual content, have no contrast requirement

Resources

There are a number of online resources and plug-ins to help test contrast. Ones we recommend checking out are:

• Stark for Figma
• Webaim Contrast Checker