Settings: Contrast

[beausmith]

Open Questions

• [ ] Can there only be one high-contrast mode which is well-incorporated with the layout/design?

[suzannechapman]

From the VVSG 1.1, Section 3.3.2 Enhanced visual interfaces:

a. An Acc-VS with a color electronic image display shall allow the voter to adjust the color saturation throughout the voting session while preserving the current votes. i. At a minimum, two alternative display options listed shall be available: 1) black text on white background,2) white text on black background, 3) yellow text on a black background, or 4) light cyan text on a black background.

[drewoxide]

Oxide can be in charge of the development of the CSS for the alternate high-contrast mode(s). Before we can do that, we need the base functionality built into the code which allows for switching display options (on the Settings screen). As soon as that functionality is complete, we will begin work on the CSS coding.

[beausmith]

I'm gonna update the description of this issue to be more specific. I'm changing "looks good" to be "is well incorporated into the design".

[beausmith]

@drewoxide asks:

Do you have an estimated time of completion for building in the basic “voter can switch contrast settings” functionality built in so Oxide can start playing with the code?

I don't yet have an estimate. It will take time to consider how to map the "alternative display options" mentioned in the VVSG — which are a bit simplistic — with actual UI — which requires more thought to maintain an effective design/layout. It is unclear at this point if a full "theme switcher" will be necessary or if some other solution will be sufficient.

Open question: If the default design matches one of "alternative display options", then do we only need one more alternative display option?

I am also hoping to educate myself about the populations for which the "alternative display options" are preferable to which can further inform which of the alternative displays will be most applicable to the largest population of voters. It would be amazing to meet with a few from this population. Doing a little of this research can save substantial development time.

[drewoxide]

Beau: for the purposes of the 31 May working demo version of the code, you can assume that we will need to include (4) different contrast settings:

• The "standard" (default) that we've been building to date • All "black on white" • All "yellow on black" • Medium gray on light gray (low contrast)

I certainly invite you to educate yourself as much as possible on the populations who need these settings, and even talk with people if possible. I think CCD could most efficiently connect you with the right people.

In any case, we'll need to build these four contrast options into the 31 May demo code. As I noted, Oxide's happy to do the work of determining how each contrast option changes the CSS, so you don't have to guess at how things will change. We intend to do that directly in the code, once there's a structure in place for a voter to implement an overall Contrast Settings change.

Please let me know if you have additional questions about the contrast settings. Thanks!

[whitneyq]

It takes at least 3 contrast settings to meet the VVSG. But, since we are using color in the interface, all four for us.

Low vision is a really broad area because there are so many different reasons why people use high or low contrast.

• Shawn Henry's TAdER project is a good place to start: http://www.tader.info/project.html
• Personal adaptations for dyslexia include contrast - often low contrast. There's some good research from MSU that addresses adult reading I can dig up for you.
• Some people have sensitivities to emitted light and use dark backgrounds to reduce the lumens.
• Ginny Redish and Mary Theofanos did some early research on web design for low vision that has some background that might be helpful: http://redish.net/images/stories/PDF/Low_vision.pdf
• Our guidance on use of fonts was solidified in this work under and EAC grant by GTRI: https://elections.itif.org/wp-content/uploads/AVTI-013-GTRI-DyslexiaFonts-2013.pdf
• The WAI project on older adults includes work on contrast: https://www.w3.org/WAI/older-users/developing/
• The NIST/TGDC position was supported by this research: https://www.nist.gov/publications/guidelines-using-color-voting-systems

This body of work is pretty well established, as you can see. Great that you want to investigate it, but a lot of work went into the VVSG 2.0 update on the requirements and you aren't going to get much traction on changing that

One of the things I hope Oxide can do is make sure that elements on the screen have good boundaries so the overall design hangs together even in the very high contrast.

You will also notice that the colors are recommendations, not specific hex-code-requirements. This was to allow some flexibility in design and also to avoid having systems failed in certification testing on a technicality.

[beausmith]

Use styled-theming for creating themes for contrast and font-size:

• https://github.com/styled-components/styled-theming
• https://jamie.build/styled-theming.html
• https://medium.com/@rossbulat/creating-themes-in-react-with-styled-components-6fce744b4e54

[whitneyq]

Yes, color settings really are like themes! And great to know that means there are resources to use.

Is there anything more I can do to help move this forward?

[beausmith]

@whitneyq The resources you provided above are super helpful. If I have anymore questions I'll let you know.