Search code examples
accessibilityuser-experience

High Contrast mode for low vision users

  1. Is it recommended to provide High Contrast Mode setting for users who visit your websites or is it okay to assume that users will use browser extensions to view pages in High Contrast Mode when needed? What are the pros and cons of both?

  2. Name some of the websites that provide HCM examples.

  3. Best practices to adopt while coding for HCM.

Solution

  • If you follow these guidelines, there should be no need to use a "high-contrast mode" and your website will still look perfectly normal.

    I wouldn't go that far. There are lots of low vision users that have a hard time reading screens with white backgrounds and prefer a high contrast mode with a black background. Most of these modes have black backgrounds and full intensity foreground colors such as yellow, cyan, purple, and white, such as this screenshot:

    screenshot of high contrast table containing a black background, cyan table headers, and yellow table cells

    For users that need these types of views, it's "normal" to them. If your website provides different color theme options, kudos to you.

    From a WCAG compliance perspective, @Josh is correct that 4.5:1 is the minimum contrast to achieve AA compliance. AAA compliance requires a 7:1 ratio.

    Many users are used to using the built in OS setting to get high contrast mode, but that doesn't mean your website couldn't provide one too. If you don't provide one, then test your site that the colors work properly when using the OS high contrast.

    You can see a video of high contrast options at https://www.sas.com/en_us/company-information/accessibility.html#m=video-sas-visual-analytics, at the 2:20 mark. The video demos older software but the new version has it too. The video shows other features that help with accessibility too.