1

I am working on a web app and have developed both a normal stylesheet and a secondary high contrast stylesheet. I am coming unstuck when it comes to allowing a user to switch between styles.

Is there a standard icon/text that should be used?

So far I have links as follows (high contrast is only visible in normal view, and normal view is only visible in high contrast):

switch to high contrast

switch to normal view

Improve this question
2
  • 1
    "I am coming unstuck" - why are you unstuck? Is user testing showing a problem? Do the words not work well? Are your users looking for an icon? Is it for desktop and/or mobile? Is high contrast view for accessibility? Do user device settings not do enough (typically they give the user a consistent high contrast experience across applications)? Sorry for all the questions!! Just trying to determine the user's 'need'.
    – Roger Attrill
    Feb 28, 2019 at 19:05
  • Do you mean standard in the sense of "convention" or in the sense of "specification approved by a standards body" (e.g. ISO)? If it's the latter, you should clarify this, since that type of question should be on topic, in my opinion.
    – Tsundoku
    Mar 8, 2019 at 9:58

2 Answers 2

Reset to default
2

Is there a standard icon/text that should be used?

From an accessibility perspective, there is not an agreed upon standard for an icon. The suggestions in the other answers are all good ones. Just remember that a low-vision user might not see the icon you're using so make sure it has alternate text so a screen reader will announce it properly.

Does the normal view style have sufficient contrast according to WCAG 1.4.3 Contrast (Minimum)? I'm hoping the answer is "yes" and that your high contrast view is trying to meet the AAA guideline of 1.4.6 Contrast (Enhanced).

If your normal view has low contrast and you're trying to satisfy WCAG 1.4.3 by having a style with increased contrast, just make sure that the mechanism you use to switch to high contrast has sufficient contrast itself. (That sounds a little confusing, but if your page has low contrast and you have a button to switch to higher contrast, make sure the button itself has sufficient contrast according to WCAG 1.4.3. That is, the color of the text on the button compared to the button's background color must have at least a 4.5:1 contrast ratio.)

An example of a high(er) contrast switch is on https://www.applause.com/, in the footer. They're using a switch, but you could just as easily have links between your two themes as you suggested. (Although I wouldn't use a literal link (<a>) because that conveys the wrong affordance. A "link" is an element used to navigate to another page [or somewhere else on the current page] and should not be used to perform an "action". A button is for "action".)

See also "G174: Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast". But one caveat with that recommendation, it talks about using an "alternative version" of a page as one possible solution. That is strongly discouraged by the accessibility community. Having a switch to a different theme, like you're trying to do, is a better solution.

Improve this answer
5
  • Yeah the normal view meets the AA standard, however even that doesn't work for people with specific visual conditions - so the high contrast will be high contrast and much larger fonts.
    – Mauro
    Feb 28, 2019 at 21:08
  • Thank you being WCAG AA compliant and then going the extra mile to have high contrast. However, I would be careful combining high contrast with larger fonts. They are separate issues and may involve different sets of users. You'd be better off having a high contrast switch and a larger font switch, although the latter can easily be done by the user using ctrl++ (cmd++) in the browser, provided you have a responsive design and can reflow properly with larger fonts.
    – slugolicious
    Mar 1, 2019 at 8:23
  • Yeah I know, I'm adding two style sheets one for high contrast and one for large fonts, so they can be added to the base styles independently or in conjunction, normal, normal+largefonts, normal+highcontrast, normal+highcontrast+largefonts
    – Mauro
    Mar 1, 2019 at 9:25
  • The problem with CTRL+/- is that in some browsers its a zoom rather than increase font size, so doesn't always reflow the viewport.
    – Mauro
    Mar 1, 2019 at 9:26
  • Do you have an example of that? Every browser I've used will increase the font, causing CSS @media breakpoints to be hit.
    – slugolicious
    Mar 1, 2019 at 17:52
1

The Noun Project is showing some circles (half light/half dark) that seem to convey the two modes well: https://thenounproject.com/search/?q=contrast

You might also use a toggle with "High contrast" as the label.

Improve this answer
1
  • this icon is/was commonly indicating the conrast control on appliances like televisions.
    – Jasen
    Mar 2, 2019 at 5:00

Not the answer you're looking for? Browse other questions tagged or ask your own question.