Vision Insight
Home MenuHigh Contrast Views
What are high contrast views
High contrast views are intended for persons who are visually impaired to improve readability. For high contrast views make sure that all designs meet the WCAG 2 AAA Compliance level.
How to create high contrast views
All high contrast views are created from a nearly finalized interior design. Any combination of text and imagery will revert to gray scale. To create a visual starting point, add a "black & white" adjustment layer as the top layer within Photoshop. Tweak the settings and the adjustment layer will serve as a desaturated color guide for text areas.
Reduce the opacity to 80% to get a feel of how images with text overlays should look. Remember to add the high contrast version of the mobile template and export all image assets.
Tools you will need
Color Contrast Analyzer & Colour Contrast Check
The "Color Contrast Analyzer" is a chrome plugin for your browser. The extension allows you to check contrast levels by clicking the extension icon and "capturing visible content."
Adjust the "WCAG level evaluated" to level AAA compliance and scan (drag and drop the image into your browser). After the image is scanned the output displays a black and white map of items outlined in white showing the level of contrast. Use the output as a guide and double check your results with "Colour Contrast Check" for a yes on WCAG 2 AAA Compliance.
How to handle images, gradients, text, buttons and transparency
- Images without text
- Images that are visible without a text overlay are free to keep the image treatment of the original design.
- Text links should be the default link color #0000ee
- Gradients with text
- Any instance were text is displayed over a gradient will automatically reverts the colored gradient to gray scale. The goal is to make the text highly accessible and pass WCAG 2 AAA standards.
- Images with a text overlay
- Images with a text overlay should be darkened drastically. Give the image an opacity of 25% over a black background container to make the text compliant.
- Image backgrounds with a high contrast text container
- Image backgrounds can be muted by giving the background image an opacity of 40% over a black background container. Convert the text container to gray scale to increase the contrast to WCAG 2 AAA Standards.
- Buttons
- Make sure there is a clear visual divide of buttons in the foreground over a background image. Areas where the user needs to interact that includes text need high contrast so edges and borders do not get lost.
- Transparency
- Background colors that contain transparency should be made solid with an opacity of 100%.
Folder structure
Place the "High Contrast View" folder under "Comps" with the "Initial Design" and "Revisions" folder nested within the high contrast view folder."
File naming convention includes "HCV" (high contrast view) and starts over at version"0": Project_HCV_version_date_designer-initials
Remember to add the high contrast version of the mobile template and export all image assets.