Principle 1: Perceivable

Providing sufficient colour contrast

A fairly simple one this and there's tools provided below to help you quickly solve any problems. Some users have difficulty perceiving text if there is too little contrast between foreground and background. The guidelines we follow at the University mean we must be compliant to AA standards within the tool checker below.

1. Grab a colour picker tool for your browser or software product

The best way to grab each colour (foreground and background) is to find the hex reference for each. You can do this in a few different ways depending on if you're grabbing in browser or on software.

In software, you'll be able to find colours from the colour tools. In browser you can either use dev tools and inspect and element or, best for those less techy, download a plugin for your browser (eye dropper is a good example, available for Chrome here)

2. Check your foreground colour against its background using the WebAim tool

Once you've got your colour hex's, drop both your foreground colour and background colour into the WebAim colour contrast checker (https://webaim.org/resources/contrastchecker). You'll need the output to be AA compliant for all text sizes.

Check your colour contrast
additional guidance

References and useful links