Accessibility
According to WCAG (Web Content Accessibility Guidelines), the text should have a colour contrast ratio of at least 4.5:1. This ensures the web content is accessible to viewers who cannot see the entire colour spectrum.
In order to ensure our web content is accessible by everyone and follows ANU branding guidelines, we created a table to advise you the approved combinations of background colour, font size, and font colour that passes WCAG 2.1 Check.
Please take this cheatsheet as a quick reference.
Related topics:
Overview
- P - Passes WCAG 2.1 Check.
- F - Fails passing WCAG 2.1 Check and/or we do not recommend using the combination.
Background colour | Text class | Font size | Black (#000000) | Gold (#BE830E) | White (#FFFFFF) | Tint (#F5EDDE) | Unigrey (#333333) |
---|---|---|---|---|---|---|---|
White (#FFFFFF) | <h1> | 3em | P | P | F | F | P |
<h2> | 1.9em | P | P | F | F | P | |
<h3> | 1.4em | P | F | F | F | P | |
<h4> | 1.2em | P | F | F | F | P | |
<h5> | 0.83em | P | F | F | F | P | |
<h6> | 0.67em | P | F | F | F | P | |
<p> | 16px | P | F | F | F | P | |
<p class="large"> | 1.25em | P | F | F | F | P | |
<p class="semi-large"> | 16px | P | F | F | F | P | |
<p class="small"> | 0.85em | P | F | F | F | P | |
Black (#000000) | <h1> | 3em | F | P | P | P | F |
<h2> | 1.9em | F | P | P | P | F | |
<h3> | 1.4em | F | P | P | P | F | |
<h4> | 1.2em | F | P | P | P | F | |
<h5> | 0.83em | F | P | P | P | F | |
<h6> | 0.67em | F | P | P | P | F | |
<p> | 16px | F | P | P | P | F | |
<p class="large"> | 1.25em | F | P | P | P | F | |
<p class="semi-large"> | 16px | F | P | P | P | F | |
<p class="small"> | 0.85em | F | P | P | P | F | |
Tint (#F5EDDE) | <h1> | 3em | P | F | F | F | P |
<h2> | 1.9em | P | F | F | F | P | |
<h3> | 1.4em | P | F | F | F | P | |
<h4> | 1.2em | P | F | F | F | P | |
<h5> | 0.83em | P | F | F | F | P | |
<h6> | 0.67em | P | F | F | F | P | |
<p> | 16px | P | F | F | F | P | |
<p class="large"> | 1.25em | P | F | F | F | P | |
<p class="semi-large"> | 16px | P | F | F | F | P | |
<p class="small"> | 0.85em | P | F | F | F | P |
Use cases
See our full set of combinations on Bands page.