Gradex square small
Gradex banner
Graduate Studies

Inclusive Design (MDes)

Chloe Typert-Morrison

Colour Contrast

Digital Media
2022
Colour contrast checkers are often third-party software that content creators can use in tandem with web content development. Still, CMS platforms would benefit from integrating them directly within their interfaces. The tool checks if the text colour has enough contrast with the background colour or image. The contrast appears as a ratio number indicating if the ratio passes or fails accessibility compliance. Failing ratios will not be able to be saved until they are updated.There is an option to check the colour contrast for different colour blindness in the colour selection screen. This dropdown shows the kinds of colour blindness between the red-green deuteranopia and protanopia colour blindness, the yellow-blue tritanopia colour blindness, and the complete lack of colour, which is monochromacy.Though colour blindness can range in severity, and some are more common than others, the tool will ensure that if people with the most severe or rare cases have enough contrast, everyone else will also have enough contrast.When adding text over an image, the interface comes with preset styles to help promote more contrast between text and the image. These include having a background directly behind the text, a translucent screen over the whole image, or no background if the image is not too busy.Selecting a Style will show a preview of it using the content on the screen. Selecting Open Options will show more customizations for the style, like text placement or background opacity.

Share with someone

Colour Contrast Ratio Failure
Colour Contrast Ratio Failure
Colour Contrast Ratio Pass
Colour Contrast Ratio Pass
Deuteranopia Colour Contrast
Deuteranopia Colour Contrast
Text Over Image Style Options
Text Over Image Style Options

Work by

Chloe Typert-Morrison

Inclusive Design, Accessible Web Design

“Giving everyone the power to create accessible content shifts the onus to the content creators from the people affected by the inaccessibility. Accessible websites benefit everyone, and I hope this...” [More]