Why Your Mac Color Contrast Testing Might Be All Wrong

Accessibility and UX Consultant | Montreal, Canada
Full-Stack Designer focusing on Accessibility(a11y), UX, Design & Dev. Visual Interpreter. Cis M / Ally.

The scene:  a Mac user is trying to test color contrast with a tool like The Paciello Group’s Colour Contrast Analyser. When they grab a color using the color picker, it doesn’t match the HTML/CSS define color being used. It is common for the Adobe Software users on Mac to change the display settings to more accurately represent the colors of printed material.

When testing Web Accessibility Standards, color should be set to match a visual display. To do this, we must make sure that the Mac Display Profile is set to sRGB IEC61966-2.1 which is an RGB color space created by HP and Microsoft to use on monitors, printer and the internet. This will ensure that the CCA will match the colors defined for a digital display.

MacOS Steps to change display color settings:

1. Go to Apple Menu > System Preferences

Screen shot of the Apple Menu > System Preferences

2. Activate Displays

Screen shot of System Preferences with the Displays icon highlighted

3. Activate Color tab within the Built-in Retina Display window 

Screen shot of the Built-In Retina Display window with the Color button highlighted

4. Navigate to Display profile and select sRGB IEC61966-2.1 

Screen shot of Built-In Retinal Display Window with Color highlighted and sRGB IEC61966-2.1 selected

Now retest to ensure that CCA’s color picker captures the coded color value.

Leave a Reply

Your email address will not be published. Required fields are marked *