HTML and colour contrast with content

By: Steve Wilkinson
Posted:
Tagged with:

Introduction to colour contrast

This guide provides useful information on colour contrast and how to avoid issues with content.

Why is it important?

We need to make sure that the colour contrast between any active controls (user interface components) or meaningful graphics, are discernible from the background they are on by people with moderately low vision.

We also need to make sure that colour contrast between text and its background is discernible by people who may have moderately low vision.

We must ensure that for people with color deficiencies, the colour, hue and saturation will have an adequate contrast between text and background.
Levels of contrast for text
The contrast ratios should be treated as threshold values. Computed values should not be rounded up, for example 2.999:1 does not meet the 3:1 threshold.

Normal regular text is approximately 16px. Large text is 14 point (18.66px) and bold or larger, or 18 point (24px) or larger.

The exceptions are logotypes where there is a brand name or text within a logo, and incidental text or images of text in a user interface component that is not currently active. These exceptions do not have a minimum contrast ratio.

Rules

  1. If it is functional, it must be contrast compliant. The planned visibility must pass contrast

    • Colour contrast applies to purpose indicators, state indicators, text and anything else that is essential to understanding interactions
    • If primary functions are visible to any degree, it should be visible for everyone unless it is decoration

  2. Text always needs contrast

    • Text contrast is 4.5:1 unless very big, everything else is 3:1

  3. Do not rely on colour only to convey meaning, use secondary sources of information

    • Do not use colour as the only indication of state within a component. Colour must never be the main indicator for anything that is functional
    • When avoiding having to rely on colour for communicating information, width and height changes, secondary text-based indicators and icons are best used

Particular cases

Forms

Do not identify errors in form fields by using red to highlight them, identify the error using text. A screen reader user will benefit if the text gets added to the form field’s label element because it will get read out when the focus is set to that field.

Link colour

If links are not underlined, or not provided with another non-colour visual indication for their default state, then the colour of the link must have:

Links must be obvious and visible, otherwise they do not become distinct from the surrounding text. A common method for non-underlined links is to underline the link when in hover state, but this does not work on a mobile device.

I suggest using underlined links but if you do not use an underline, use a different visual cue to colour, or increase the link’s font weight.

High contrast versions

Making a website meet colour contrast requirements in high contrast can be very difficult, but it you can comply by having alternative versions of the website or individual webpage.

This is best achieved by having a control such as a link that switches to high contrast mode.

If this method is to be acceptable:

Tools

Offline tools

Online tools

Mobile tools

Wrapping up

Hopefully this guide has helped you to understand a bit more of using colour contrast in your content.

Share on:

Site preferences

Please feel free to display our site, your way by finding the preferences that work best for you. We do not track any data or preferences at all, should you select any options in the groups below, we store a small non-identifiable token to your browser's Local Storage, this is required for your preferencesto persist across pages accordion be present on repeat visits. You can remove those tokens if you wish, by simply selecting Unset, from each preference group.

Theming

Theme
Code block theme

Code theme help

Code block themes can be changed independent of the site theme.

  • Default: (Unset) Code blocks will have the same theme as the site theme.
  • Light 1: will be default for users viewing the light theme, this maintains the minimum 7:1 (WCAG Level AAA) contrast ratio we have used throughout the site, it can be quite difficult to identify the differences in colour between various syntax types, due to the similarities in colour at that contrast ratio
  • Light 2: drops the contrast for syntax highlighting down to WCAG Level AA standards (greater than 4.5:1)
  • Dark: Syntax highlighting has a minimum contrast of 7:1 and due to the dark background differences in colour may appear much more perceivable

Motion

Motion & animation

Motion & animation help

  • Default (Unset): Obeys device settings, if present. If no preference is set, there are subtle animations on this site which will be shown. If you have opted for reduce motion, smooth scrolling as well as expanding and collapsing animations will no longer be present, fading transtitions and micro animations will still be still present.
  • None: All animations and transitions are completely removed, including fade transitions.

Links

Underline all links

Underline all links help

  • Default (Unset): Most links are underlined, with a few exceptions such as: the top level links in the main navigation (on large screens), cards, tags and icon links.
  • Yes: Will add underlines to the exceptions outlined above, resulting in every link being underlined

Text and paragraphs

Font size (main content)

Font size help

This setting does not apply to the site's header or footer regions

  • Default (Unset): Font sizes are set to site defaults
  • Selecting Large or Largest will increase the font size of the main content, the size of the increase depends on various factors such as your display size and/or zoom level. The easiest way to determine which option suits you best would be to view this text after clicking either size's button
Letter spacing

Letter spacing help

  • Default (Unset): Default letter spacing applies
  • Increased: Multiplies the font size by 0.12 and adds the sum as spacing between each character
Line height

Line height help

  • Default (Unset): all text has a minimum line height of 1.5 times the size of the text
  • Increased: all text has a line height of twice the size of the text
Line width

Line width help

  • Default (Unset): all text has a maximum line width of 80 REM units (this averages around 110 characters per line)
  • Decreased: all text has a maximum line width of 55 CH units (this averages around 80 characters per line)
Paragraph spacing

Paragraph spacing help

  • Default (Unset): The space between paragraphs is equivalent to 1.5 times the height of the paragraph's text
  • Increased: The space between paragraphs is equivalent to 2.25 times the height of the paragraph's text
Word spacing preference

Word spacing help

  • Default (Unset): No modifications to word spacing are present
  • Increased: Spaces between words are equivalent to 0.16 times the font size