Search Menu
Language Menu
Mobile Menu
OGCIO


Best Practice 1.7 – Provide sufficient colour contrast (Baseline level)


Choose appropriate text and background colours so that they have a contrast ratio of at least 4.5:1 to make the text easy to read.

 

Before Rectification
A sample mobile application page with poor colour contrast between the text and the background.
In this example, the heading text in purple colour with background colour of black has poor contrast, making it hard to read.
After Rectification
A sample mobile application page with high colour contrast between the text and the background.
When higher contrast text is used, the text is much easier to read. There are colour contrast checkers available online that can assist mobile application developers to perform colour contrast test.

 

W3C WCAG Reference: 1.4.3 Contrast (Minimum)