Design System Color Contrast Evaluation
A brief summary of the work is provided below. More detail is available upon request.
Introduction
Members of the Information Systems Department have been working to improve the accessibility of IMT web systems. A color contrast issue was identified in the IMT design system where the primary button did not meet the minimum required color contrast for Level AA conformance to the Web Content Accessibility Guidelines 2.1 (WCAG 2.1).
Approach
A color contrast evaluation was conducted on 16 design system components to identify areas of weakness. Each component in the design file was assessed for conformance with guidelines 1.4.1 Use of Color, 1.4.3 Minimum Contrast, and 1.4.11 Non-text Contrast.
Results and recommendations
The evaluation of the components identified 40 of 170 instances in which the color contrast did not meet the applicable Level AA WCAG 2.1 criteria. The following color contrast issues were identified:
- Light type (secondary type)
- IMT Blue
- Warning input
- Error alert
- Primary button
- Confirmation button
- Internal only button
- Page specific button
- Primary type in pagination
- Tooltip heading
The issues were described and potential solutions were provided in the full report