Bug 236010

Summary:

AX: Color and background-color properties for <select> have low colour contrast

Product:

WebKit

Reporter:

Owen Jones <owen.jones>

Component:

Accessibility

Assignee:

Nobody <webkit-unassigned>

Status:

NEW ---

Severity:

Major

CC:

andresg_22, david.cox, oliver.byford, webkit-bug-importer

Priority:

Keywords:

InRadar

Version:

Safari 15

Hardware:

iPhone / iPad

OS:

iOS 15

Attachments:

Description	Flags
Screenshot of WebAIM color contrast result and live page example	none

Description Owen Jones 2022-02-02 04:16:16 PST

Created attachment 450633 [details]
Screenshot of WebAIM color contrast result and live page example

##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

Comment 1 Radar WebKit Bug Importer 2022-02-02 04:16:27 PST

<rdar://problem/88373912>