{"id":21087,"date":"2025-02-12T11:50:58","date_gmt":"2025-02-12T16:50:58","guid":{"rendered":"https:\/\/carleton.ca\/webaccessibility\/?page_id=21087"},"modified":"2025-06-09T08:16:49","modified_gmt":"2025-06-09T12:16:49","slug":"ensure-text-colour-contrasts-with-background-colour","status":"publish","type":"page","link":"https:\/\/carleton.ca\/webaccessibility\/ensure-text-colour-contrasts-with-background-colour\/","title":{"rendered":"Ensure text colour contrasts with background colour"},"content":{"rendered":"\n
\n
\n\n
\n
\n
\n

\n Ensure text colour contrasts with background colour\n <\/h1>\n \n \n <\/header>\n\n <\/div>\n\n <\/div>\n\n <\/div>\n<\/section>\n\n\n\n

Accessibility<\/h2>\n\n\n\n

Text should always be rendered on the page in a colour that contrasts well enough with the background to make it most legible. <\/p>\n\n\n\n

Reason<\/h2>\n\n\n\n

When text is presented in a colour well contrasted to the background, it makes it much easier to read. With a colour combination that is not clearly contrasted, people with visual disabilities lose access or have to take further unnecessary steps to view the text. In fact, poor colour contrast can lead to people with what is deemed to be very good vision not being able to read text. <\/p>\n\n\n\n

Best practice<\/h2>\n\n\n\n

In the templates provided by the University via ITS, the colours of text against different colours of available background are throughly tested. This is for ordinary text, link text, link text on different coloured buttons, etc. <\/p>\n\n\n\n

If you have a need to create text elsewhere, for example on a third-party website, or in an email the best practice is to use a colour contrast checker. These are easy to find on the web, but we recommend you use WAVE’s Color Contrast Checker<\/a>.<\/p>\n\n\n\n

Example of less accessible practices<\/h2>\n\n\n\n

Poor examples are sometimes easy to spot. For example, this screenshot illustrates how hard it is to read text when the contrast is too low:<\/p>\n\n\n\n

\"illustration<\/figure>\n\n\n\n

An individual does not need to have a very severe visual disability to find it difficult to read text rendered in this colour against this background.<\/p>\n\n\n\n

Additional benefits<\/h2>\n\n\n\n