{"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":"2026-07-22T09:40:03","modified_gmt":"2026-07-22T13:40:03","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 well contrasted with its background, it is much easier to read. Poor colour contrast can make text inaccessible to people with visual disabilities and difficult to read even for people with very good vision.<\/p>\n\n\n\n

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

The ITS templates provided by the University use thoroughly tested colour combinations for text, links, and buttons. If you create content elsewhere, such as on a third-party website or in an email, use a colour contrast checker. We recommend 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