input-masking icon indicating copy to clipboard operation
input-masking copied to clipboard

Published 20 hours ago • verified publisher icon estelle

color contrast - placeholder

Open weboverhauls opened this issue 8 years ago • 1 comments

The placeholder text should pass WCAG color contrast requirements (accessibility), especially since it's a required format.

The pink (#ffc2cd) fails color contrast with a ratio of Contrast Ratio: 1.52:1; the requirement is 4.5:1.

Suggest #e9002b which is more reddish but has a passing ratio of 4.67:1.

Reference: https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

weboverhauls avatar Dec 13 '16 14:12 weboverhauls

Note: browsers' default placeholder does not pass WCAG AA requirements either. One must use CSS (extensions) to correct, but then the text may appear as the value (entered content), thus the paradox of usable/accessible placeholders.

weboverhauls avatar Dec 16 '16 16:12 weboverhauls