Colour contrast
Opened this issue · 7 comments
This is a general issue for all of the feedback the DAC has been sending us on colour contrast.
Thanks @neoeno - we'll leave this filed as we're revisiting some of the colour palette stuff.
Headings
The Luminosity between the text and back ground is far too low and should be reading at least (4.5:1) to pass double (A) standard, I would like to suggest making the text two shades darker in colour would then pass double (A) standard as shown above.
The general content appearance proves difficult to navigate as the text, headings and edit fields are too light and are affected by the background glare making text focus problematic. A deeper shade is required to provide good heading appearance together with black text to benefit a good reading plaform. Edit field requires bolder bordering to help location and data entry.
Dough Slider
As a vision impaired user, the slider option can prove difficult as the button cannot be seen due to poor contrast. The slider control would benefit from a solid colours button rather than the transparent current appearance. The progress shading would also benefit from increased contrasting.
The slider feature display was again difficult to see due to poor contrasting. It took a little while to decipher the functionality. The slider button was difficult to locate and access as the background glare encapsulated the circular buttons appearance. This needs to be darker or perhaps a solid appearance.
Once accessed, there is a square which appears to help this location but this needs to present prior to use to help initial access.
See #207 for further discussion of slider accessibility.
Footer
This section of the page was difficult to read and navigate due to the font appearance being too light to view. Even with larger sized text and magnification, the clarity of text did not improve. The Museo-sans font is displayed in 16px or 12pt which usually is a good size to display text. The issue of a poor display stems from the light colour together with a lack of weight attached to the font.
The colour contrast returned a ratio of just 5.2:1 which satisfies the WCAG 0 minimum threshold however, this does not help the end user as the light appearance can hinder navigation for all users particularly after a period of time or when viewed on a smaller mobile device. Personally, I recommend using a darker shade to increase the contrast ratio to beyond 10.0:1 coupled with added weight to the font. At this moment the weight is recorded as 300 so an increase to 400 is recommended.
Forms
Another issue with the light appearance was noticed with the form fields. The edit box border was too light to notice which made it difficult to know where to enter data. Bolder outlines are required to enhance edit field position and access.
The general content appearance proves difficult to navigate as the text, headings and edit fields are too light and are affected by the background glare making text focus problematic. A deeper shade is required to provide good heading appearance together with black text to benefit a good reading plaform. Edit field requires bolder bordering to help location and data entry.
As with the desktop version, the light contrast proves difficult to read with both text and edit fields difficult to read and enter date=a. Improved contrast and bolder field borders will improve this. Alternatively, the addition of an alternative style sheet may further improve the use of this featured site.
Error messages
The error messages displayed on this page are difficult to read due to poor contrast. The pastel red colour is affected by background glare creating a distorted image of text difficult to read. Darker red shades are required to display these messages to provide clear information and increase the visibility of the information.
General
The information displayed on this page is very light and becomes easy for users with vision impairment to miss vital information on a small screen such as this. The light green and grey contrasting proves generally difficult to follow as background glare has a detrimental effect on the text appearance. Better contrast is required to enhance text and features appearance.
Throughout the pages, the theme colour is consistent with the issue of lack of contrast hindering navigation. Issues similar to the ones experienced on desktop are still apparent and perhaps more difficult to overcome due to the minimal size of the device screen. Greater contrast would help in these issues. Providing an alternative style sheet would also provide a great option for user requiring an alternative view.
(Parts of this can be addressed within the calculator.)