Other colour and contrast considerations

Learn more about designing for colour-blind users — create accessible brand colours, style guides and colour systems, and work with different display modes, thin fonts, gradients and background images.

On this page

Designing with colour

See the following articles and tools for help choosing accessible colours for your designs.

Articles

Tools

Brand colours, style guides, colour systems

Consider contrast when developing brand colours, style guides, or colour systems for your products and services. Style guides and colour systems will often incorporate the brand colours, so it’s a good idea to have these aligned and accessible where possible. This helps ensure that your brand and content always have sufficient contrast for everyone to see them.

High contrast and other display modes

Devices, operating systems and browsers have different display modes that people can use to help them better read and see content, for example:

For an overview of these different display modes, see Operating System and Browser Accessibility Display Modes — The A11y Project.

For help understanding how these system- or browser-level display modes can change your content’s visual appearance, and the accessibility implications of and designing for the different display modes, see the following resources:

The Web Content Accessibility Guidelines (WCAG) rules around colour and contrast do not apply to content whose visual appearance has been changed by one of these special display modes. This is because those special display modes are features of the operating system or browser and they modify the visual design of the web page in ways that are outside the reliable control of the developer.

For a more technical discussion of this issue, see Do issues with Windows high contrast mode fall under WCAG 2.1? (issue #623) — w3c/wcag — GitHub.

Thin or lightweight fonts

Thin or lightweight fonts have thinner, lighter strokes than most commonly used fonts. Generally, they are harder to see, especially for people with vision impairments. And because of the way that fonts are rendered on screen (anti-aliasing), thin fonts have less effective contrast than fonts of the same size with a more typical stroke width.

If a thin font is used, increase the contrast ratio to account for its inherently lower legibility.

Unfortunately, WCAG luminance contrast requirements do not consider the thinness or weight of the font when it comes to the contrast of text colour.

However, when deciding on the colours to use with a thin font, there is a contrast calculation that takes font weight into account. See APCA: A new way to measure contrast.

Contrast with colour gradients and background images

Text, graphical objects and user interface components that appear on top of a colour gradient or background image can often have contrast issues. As the background colour can change a lot, even pixel to pixel, the contrast between foreground and adjacent background colours can be high in one spot and low in another.

For text on top of a colour gradient or background image, every part of each mark or character needs to contrast sufficiently against its adjacent colour, whether that’s a 3:1 or 4.5:1 ratio (see Contrast for text and images of text — Knowledge Area: Colour and contrast).

For graphical objects and user interface components on top of a colour gradient or background image, the visual parts that are necessary to understand them or their states need to have a minimum contrast ratio of 3:1 against their adjacent colours.

For help testing the contrast of content on top of a colour gradient or background image, see Tools for testing gradients and background images — Knowledge Area: Colour and contrast.

More information on contrast with colour gradients and background images

APCA: A new way to measure contrast

The Accessible Perceptual Contrast Algorithm (APCA) is a new way to calculate the contrast between text and background. It addressess a number of failings with the current WCAG 2 contrast algorithm by considering additional factors beyond the simple difference in luminance between 2 colours. These additional factors include:

The APCA is to become part of the W3C Accessibility Guidelines (WCAG) 3.0, which will not be ready for several years. However, tools exist already for checking APCA contrast between text and background colours:

For more information on the APCA, see:

Note: The APCA was originally called the Advanced Perceptual Contrast Algorithm.