Color and background-color properties for <select> have low colour contrast - Safari 15, iOS 15

[owenatgov]

Upstream bug: https://bugs.webkit.org/show_bug.cgi?id=236010
Date: 2021-02-08
Reported by: @owenatgov @davidc-gds (found by @danacotoran, investigated by @vanitabarrett)
Related to:

• Select elements have grey background in Firefox govuk-frontend#2435 (comment)
• Fix select component renders with grey background in Firefox and Safari govuk-frontend#2524
• Report issue with default styling of select in iOS Safari govuk-frontend#2526

---

Steps to reproduce

1. Open an iOS Safari browser (version 15)
2. Go to a webpage with a <select> element which uses the default color and background-color properties (for example, https://www.gov.uk/search/all?keywords=benefits&order=relevance)
3. Check what the <select> element’s background colour and

Expected behaviour

The <select> element should have an adequate colour contrast between its background colour and font colour.

To meet WCAG colour contrast criteria for small text, that would be a ratio of at least 4.5:1 for AA, and ideally a ratio of 7:1 or greater for AAA.

Currently, the colours for Chromium are set as #000 for the font and #FFF for the background, which is an excellent colour contrast ratio of 21:1.

Actual behaviour

Currently the <select> font and background have a colour contrast ratio of 3.31:1. This is well below the 4.5:1 ratio recommended in WCAG 2.0 for AA compliance.

The current defaults are:

• #E9E9EA for the background
• #007AFF for the font

Permalink showing the colour contrast report: https://webaim.org/resources/contrastchecker/?fcolor=007AFF&bcolor=E9E9EA