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
- High contrast and other display modes
- Thin or lightweight fonts
- Contrast with colour gradients and background images
- APCA: A new way to measure contrast
Designing with colour
See the following articles and tools for help choosing accessible colours for your designs.
- Improving The Color Accessibility For Color-Blind Users — Smashing Magazine
- Resources for Designing for the Colorblind — We Are Colorblind
- From A Colourblind Designer To The World: Please Stop Using Red And Green Together — Baseline Education
- Accessible Palette — Wildbit: Create color systems with consistent lightness and contrast.
- Accessible color palette builder — toolness: Select a palette of colours and check which ones result in accessible combinations.
- Color Contrast Analyser for Sketch — getflourish — GitHub: A Sketch plugin for testing the contrast of 2 layers.
- Color Tool — Material Design: Test user interface (UI) colour palettes and their accessibility.
- Contrast — Figma Community: A Figma plugin for checking the contrast of a layer and its background.
- Contrast grid — Eightshapes: Build your own grid of foreground and background colours and check their varying contrast ratios.
- Leonardo: Generate great colour palettes with lots of control over contrast.
- Stark — Stark Lab: A colour blindness and contrast checking plugin for Sketch, Figma and Adobe XD.
- Who can use this color combination? — Corey Ginnivan: Compare 2 colours for contrast and their impact on people with different types of colour blindness.
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.
- Designing accessible color systems — Stripe
- Accessible Palette: stop using HSL for color systems — Wildbit
- My struggle with colors, part II — Building an accessible color system from scratch — Zain Adeel, UX Collective
- Using color — U.S. Web Design System
- Colour Safe: explore accessible colour palettes for your website
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:
- high contrast
- forced colours
- inverted colours
- dark mode
- reduced motion.
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 Guide To Windows High Contrast Mode — Smashing Magazine
- Styling for Windows high contrast with new standards for forced colors — Microsoft
- Forced colors explained: A practical guide — Polypane
- Windows High Contrast Mode, Forced Colors Mode And CSS Custom Properties — Smashing Magazine
- OS: High Contrast versus Inverted Colors — Adrian Roselli
- The CSS prefers-color-scheme user query and order of preference — Sara Soueidan
- Quick Note on ARIA and Windows High Contrast Mode — Scott O’Hara.
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
- Ensure High Contrast for Text over Images — Nielsen Norman Group
- Enhancing text contrast — Colour contrast for text — Accessibility Developer Guide
- Examples 3 and 4 — G207: Ensuring that a contrast ratio of 3:1 is provided for icons — WCAG 2 — W3C
- F83: Failure of Success Criterion 1.4.3 and 1.4.6 due to using background images that do not provide sufficient contrast with foreground text (or images of text) — WCAG 2 — W3C
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:
- font weight and size
- perceived luminance contrast between text and background
- context such as ambient lighting, screen quality, and the intended purpose of the text.
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:
- APCA Contrast Calculator — Myndex Research: The main APCA contrast checker from Myndex
- Bridge-PCA Contrast Calculator — Myndex Research: Uses APCA maths but all colour recommendations meet WCAG 2 contrast requirements
- Contrast tools — contrast.tools
- Colour Contrast Tool — cliambrown.com
- New color contrast calculation — Advanced Perceptual Contrast Algorithm (APCA) — Chrome Developers: APCA in the Chrome Color Picker.
For more information on the APCA, see:
- It’s time for a more sophisticated color contrast check for data visualizations — Datawrapper
- APCA • SAPC • SARCAM Primary Repository — Myndex — GitHub.
Note: The APCA was originally called the Advanced Perceptual Contrast Algorithm.