{"id":2856,"date":"2025-11-18T10:22:25","date_gmt":"2025-11-18T15:22:25","guid":{"rendered":"https:\/\/it.rutgers.edu\/digital-accessibility\/?page_id=2856"},"modified":"2026-01-07T09:59:08","modified_gmt":"2026-01-07T14:59:08","slug":"non-color-indicators","status":"publish","type":"page","link":"https:\/\/it.rutgers.edu\/digital-accessibility\/accessible-web-content\/non-color-indicators\/","title":{"rendered":"Non-color indicators"},"content":{"rendered":"
\n\n
\n \n
\n
\n
\n
\n\t\t\t\t

Non-color indicators<\/h1>\n\n<\/div>\n\t\t\t\t
<\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n\n<\/div>\n\n <\/section>\n\n\n
\n\n
\n \n

Alternatives to color to convey meaning<\/strong><\/h2>\n

It is important that you are not using color alone to convey meaning. This can be done through the use of styling (like underlining links), use of patterns, and the addition of text to describe intent.<\/p>\n

Appropriate use<\/strong><\/h2>\n

Use of text to convey meaning<\/strong>: Below we use color and text to signify dates with available tickets.<\/p>\n

\n \n \n \n \n \n <\/colgroup>\n \n\n \n\n \n \n
Status<\/th>Event date<\/th>Description<\/th><\/tr>\n<\/thead>\n
Closed<\/span><\/td>9\/21\/25<\/td>Team A vs Team B<\/td> <\/tr>\n
Open<\/span><\/td>9\/27\/25<\/td>Team A vs Team C<\/td> <\/tr>\n <\/tbody>\n <\/table>\n \n \n \n<\/div>\n\n

Accessible links<\/strong>: We cannot use color alone to convey meaning, and that includes indicating to your users that the text is a link with color only. The easiest way to achieve this is by underlining your links.<\/p>\n

Below are the WCAG requirements:<\/p>\n