User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
While we have color palette to handle conditional formatting of table rows we want to create accessible color palette. How is this handled addressing accessibility for colour blind like greyscale?
Any references would help us to address guidelines from a11y.
Images for reference below.
Colored Table
Greyscaled version of same colours.
From an accessibility conformance perspective with respect to WCAG 2.1, the main guideline that comes into play here is WCAG 1.4.1 Use of Color (emphasis mine):
Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
If you are doing conditional formatting, the color chosen based on the condition is "conveying information". That is, the color of the row means something. Whatever that meaning is, there must be another indicator in addition to color that a person could detect. It could be simple such as a font style (bold or italic) or a different font family or a different font size.
It doesn't have to be font related. You could have a column in the table that contains an icon (checkmark, circle-X, flag) that conveys the information. The main point is that there is a secondary way to convey information besides color.
The actual color of the row with respect to a color palette is not really dictated by accessibility other than whatever color your text is must have sufficient contrast with your row background color (1.4.3 Contrast (Minimum)).
If you end up with a column of icons, the icons will also need sufficient contrast with your row background color (1.4.11 Non-text Contrast). The contrast required for icons is lower than that required for text (3:1 compared to 4.5:1).
Additionally, if you have icons that convey meaning, the icons will need an equivalent text alternative (1.1.1 Non-text Content).
