{"id":21095,"date":"2025-02-20T08:54:22","date_gmt":"2025-02-20T13:54:22","guid":{"rendered":"https:\/\/carleton.ca\/webaccessibility\/?page_id=21095"},"modified":"2025-06-09T08:12:50","modified_gmt":"2025-06-09T12:12:50","slug":"avoiding-colour-to-alert-users-to-meaning","status":"publish","type":"page","link":"https:\/\/carleton.ca\/webaccessibility\/avoiding-colour-to-alert-users-to-meaning\/","title":{"rendered":"Avoiding colour to alert users to meaning"},"content":{"rendered":"\n
\n
\n\n
\n
\n
\n

\n Avoiding colour to alert users to meaning\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

Alerting your users is important and we have many ways to do this. The best way is almost always text\/language.<\/p>\n\n\n\n

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

Some methods used can stop users from being able to get clear information. This can be because they cannot perceive colour, for example.<\/p>\n\n\n\n

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

If you want to alert<\/em> folks to something, the best way to do this is always through clear, concise language. This is the base method because, as long as the language is succinct and the font is clear they will be able to access the text by reading it visually or by using assistive technology. <\/p>\n\n\n\n

You can employ other methods. You can read about the alerts block in cuTheme<\/a>, for example. They look like this:<\/p>\n\n\n

\n\n \n <\/path>\n <\/svg>\n \n
\n

\n Here is some information \n <\/p>\n <\/div>\n<\/div>\n\n\n

\n\n \n <\/path>\n <\/svg>\n \n
\n

\n Oops! An Error!\n <\/p>\n <\/div>\n<\/div>\n\n\n

\n\n \n <\/path>\n <\/svg>\n \n
\n

\n Danger, Will Robinson!\n <\/p>\n <\/div>\n<\/div>\n\n\n

\n\n \n <\/path>\n <\/svg>\n \n
\n

\n You did it – Well done!\n <\/p>\n <\/div>\n<\/div>\n\n\n\n

Note that although they are different colours, it is not the colour alone which signals the meaning. The language is the main way to signify the meaning of the alert. In addition, there is an icon which adds meaning.<\/p>\n\n\n\n

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

Relying on colour alone can leave people guessing. If you are unable to perceive colour because of “colour blindness” or are accessing the content via a screen reader, the presence of colour is either moot or misleading. For example, <\/p>\n\n\n\n

Should you invest in a vacation timeshare in Ottawa for February?<\/em><\/p>\n\n\n

\n\n \n <\/path>\n <\/svg>\n \n
\n

\n We think this colour answers the question for you!\n <\/p>\n <\/div>\n<\/div>\n\n\n\n

…especially when the text is also ambiguous.<\/p>\n\n\n\n

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