Luminosity Brighness of Enabled/Disabled Form Controls
using default browser styling

Standard HTML form controls. No styling -- default browser styling. Where possible the darkest color was used for contrast determination. All borders were 1 px, used 4.5:1 lumosity ratio as passing per WCAG 1.4.3. Used the latest version of each browser. No access to Edge.

Used Color Contrast Analyser (https://www.paciellogroup.com/resources/contrastanalyser/) on Windows and Macintosh.

Form Controls exemplar contrast- enabled 4.5:1, disabled 3:1

Results:

Examples

Input fields

Not disabled:

Disabled:

Browser enabled contrast disabled contrast
FireFox

top border 2.2:1

other borders 1.3: 1

borders 2.1:1

inside fill 1.1:1 with border
Chrome borders 2.4:1

borders 2.4:1

inside fill 2.0:1 with border
Safari border: 1.6:1 border 1.3:1
IE

borders 5.0:1

border 1.9:1

inside fill 1.5:1 with border

.

Select menus

Not Disabled

Browser enabled contrast disabled contrast Select contrast
not stylable
FireFox

top border 2.2:1

other borders 1.3: 1

Text for choices 21:1

borders 2.1:1

Text for Choices: 4.0:1 with greyed background

2.9:1

#3399FF
Chrome

borders 2.3:1

text for choices 17.4:1

borders 2.3:1

text for choices 3.2:1 with greyed background

3.2:1

#1E90FF
Safari

borders 1.4:1

text for choices 21.0:1

borders 1.4:1

text for choices 3.9:1

3.2:1

#3192F9
IE

borders 5.0:1

text for choices 8.6:1

borders1.9:1

text for choices 3.9:1 with greyed background

2.3:1

#5AB7E3

Checkboxes

Browser enabled contrast disabled contrast
FireFox

border 3.2:1

check mark 4.5:1 to 3.0:1 gradient background

 borders 2.1:1
Chrome

borders 2.0:1

checkmark 7.5:1

borders 1.5:1
Safari

top border 2.9:1

other borders 2.2:1

checkmark 10.2:1

top border 1.6:1

borders1.4:1
IE

border 5.0:1

checkmark 16:1

borders 1.9:1

Radio buttons

Browser enabled contrast disabled contrast
FireFox

border 2.8:1

selector (dot) 4:6:1 [8x8 pixel avg)

 border 1.9:1
Chrome

border 1.6:1

selector (dot) 4:8:1 [6x6 pixel avg)

 borders 1.3:1
Safari

border 2.1:1

selector (dot) 10.4:1

 borders 1.3:1
IE

border 3.9:1

selector (dot) 10.1:1 [6x6 pixel avg)

 border 1.8:1

Textareas

<-- style resizer control-poor contrast (::-webkit-resizer)

Browser enabled contrast disabled contrast
FireFox

top border 2.2:1

other borders 1.3:1

text 21:1

borders 2.2:1

inside with border 1.9:1
Chrome

border 2.8:1

text 7.8:1

border 2.4:1

inside with border 2.0:1
Safari

border 4.7:1

text 21.0

border 2.8:1
IE

border 16:1

text 16.1:1

border 1.9:1

inside with border 1.5:1

Action buttons

 

Browser enabled contrast disabled contrast
FireFox

border 5:1

text 20.4:1 - 13.5:1 (gradient button background)

border 2.1:1

text 4.6:1 with background
Chrome

border 2.5:1

text 16.1:1 - 18:1 (gradient button background)

border 2.5:1

text 2.6:1 with background
Safari

border 1.4:1

text 21.1:1

border 1.2:1

text 4.0:1
IE

border 5.0:1

text 10.6:1 - 9.4 (gradient button background)

border 1.9:1

text 3.9:1 with background

.

Form Controls exemplar contrast- enabled 4.5:1, disabled 3

using css

enabled - style="border: 1px solid #777;"

disabled - style="border: 1px solid #959595;"

Not disabled:

Disabled: