Color contrast in example applications should conform to WCAG 1.4.3 requirements. #1731
Description
The issue
In a number of cases the chosen colors used in the examples do not conform to the following WCAG specification:
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1
As illustration, I will look at the TOH-5 application.
Included in the image is a selection of fore and background colors from the list of items, showing the contrast issue. An analysis of the pages as a whole shows that this occurs multiple times:
The rationale
Users with poor visual acuity or color blindness could experience difficulty to use the current applications. These are users with sufficient sight not to rely on assistive technologies such as screen readers. This could affect a very large section of the population: https://en.wikipedia.org/wiki/Visual_impairment
The recommendation
By adopting either of the recommended Material Design Blue Gray or Material Design Gray palettes, this can be corrected by using the correct combinations throughout. Example applications should reach an AA compliance level. AAA level is not required.
The palletes:
By using the correct combinations the following suggested results can be achieved:
An analysis of the two palletes provides the following list of possible combinations that would always ensure the correct color contrast. Each new row starts with a color, followed by all the possibilities to use as a second color. Each time the Material indicator is given with the hex color in brackets:
Blue Gray Palette:
50(#ECEFF1),600(#546E7A),700(#455A64),800(#37474F),900(#263238),black(#000000)
100(#CFD8DC),700(#455A64),800(#37474F),900(#263238),black(#000000)
200(#B0BEC5),800(#37474F),900(#263238),black(#000000)
300(#90A4AE),900(#263238),black(#000000)
400(#78909C),black(#000000)
500(#607D8B),black(#000000)
600(#546E7A),50(#ECEFF1),white(#FFFFFF)
700(#455A64),50(#ECEFF1),100(#CFD8DC),white(#FFFFFF)
800(#37474F),50(#ECEFF1),100(#CFD8DC),200(#B0BEC5),white(#FFFFFF)
900(#263238),50(#ECEFF1),100(#CFD8DC),200(#B0BEC5),300(#90A4AE),white(#FFFFFF)
white(#FFFFFF),600(#546E7A),700(#455A64),800(#37474F),900(#263238),black(#000000)
black(#000000),50(#ECEFF1),100(#CFD8DC),200(#B0BEC5),300(#90A4AE),400(#78909C),500(#607D8B),white(#FFFFFF)
Gray Palette:
50(#FAFAFA),700(#616161),800(#424242),900(#212121),black(#000000)
100(#F5F5F5),700(#616161),800(#424242),900(#212121),black(#000000)
200(#EEEEEE),700(#616161),800(#424242),900(#212121),black(#000000)
300(#E0E0E0),700(#616161),800(#424242),900(#212121),black(#000000)
400(#BDBDBD),800(#424242),900(#212121),black(#000000)
500(#9E9E9E),900(#212121),black(#000000)
600(#757575),white(#FFFFFF),black(#000000)
700(#616161),50(#FAFAFA),100(#F5F5F5),200(#EEEEEE),300(#E0E0E0),white(#FFFFFF)
800(#424242),50(#FAFAFA),100(#F5F5F5),200(#EEEEEE),300(#E0E0E0),400(#BDBDBD),white(#FFFFFF)
900(#212121),50(#FAFAFA),100(#F5F5F5),200(#EEEEEE),300(#E0E0E0),400(#BDBDBD),500(#9E9E9E),white(#FFFFFF)
white(#FFFFFF),600(#757575),700(#616161),800(#424242),900(#212121),black(#000000)
black(#000000),50(#FAFAFA),100(#F5F5F5),200(#EEEEEE),300(#E0E0E0),400(#BDBDBD),500(#9E9E9E),600(#757575),white(#FFFFFF)
Further recommendations
Building this into the current global style could assist in bringing it to all the examples and provide guidelines for creating component specific styles.
For images it would be recommended to use the same guidelines to select colors for text inside images as well as any critical components, for example process flow arrows and boxes.