There is decent contrast for reading text (minimum 4.5:1 ratio for standard text, 3:1 for large text)
Design Notes
Ensure text has sufficient contrast
Ensure there is strong contrast between foreground and background colours helps ensure people can read content comfortably. Ensure the colour contrast between the text colour and background colour meets the following minimum ratios:
- Small text is 4.5:1 — text smaller than 24px or 19px if bold
- Large text is 3:1 — text larger than 24px or 19px if bold.
For improved results, opt for the following ratios:
- Small text is 7:1 – text smaller than 24px or 19px if bold
- Large text is 4.5:1 – text larger than 24px or 19px if bold.
Use a tool which calculates the ratio between the text colour and background colour. All colour combinations should be tested prior to the approval of designs.
More information
Developer Notes
Ensure colour contrast requirements are met
Before implementing a design ensure that it meets colour contrast requirements.
Contrast Minimum
People with partial sight often have difficulty reading text if the colour contrast between foreground and background colours is not sufficient.
Using colours that contrast well makes it much easier for people to read content comfortably.
- Small text is 4.5:1 — text smaller than 24px or 19px if bold
- Large text is 3:1 — text larger than 24px or 19px if bold.
Non-Text Contrast
Active user interface components and meaningful non text graphics should be distinguishable by people with visual impairments.
- The minimum contrast for such components is 3:1.
Information and tools
Testing Notes
There is decent contrast for reading text
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:
- Large Text: Text and images of large-scale text have a contrast ratio of at least 3:1;
- Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
- Logotypes: Text that is part of a logo or brand name has no contrast requirement
Large text = 18 point (24px) or 14 point (18px) bold
Steps to check: Identify different colour combinations for text, check each with a tool
Impact range: Medium
Test type: Semi-automated (aXe browser extension will identify contrast issues but identifying all issues and validating requires manual review)
Tool: Colour Contrast Analyser
WCAG Reference: Understanding Success Criterion 1.4.3: Contrast (Minimum)