WebAIM - Web Accessibility In Mind

E-mail List Archives

1.4.1 use of color for state indicator

for

From: glen walker
Date: Mar 9, 2020 12:20AM

--00000000000068f3f105a0660246
Content-Type: text/plain; charset="UTF-8"

[image: image.png]
(Image Description: Four buttons, labeled A, B, C, and D. Buttons A, B,
and D have black text and a white background. Button C has white text and
a black background.)

If you have a set of buttons, such as in a toolbar, and one button is
selected and the others are not, and that selection is indicated by a color
difference, isn't that a 1.4.1 failure?

"Color is not used as the only visual means of conveying information..."

The example in the image has the highest contrast difference between states
but there isn't a requirement for contrast between states. Technically,
the black selected button is only different from the other buttons by
color. It's using color as the only means to convey the selected meaning.
Even if the selected button had a "pushed in" appearance, that would still
only be a color difference (having the southeast button borders be a light
color and the northwest borders be a darker color).

F73 (https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/F73) talks about
red and pink not being color differences but rather lightness differences
so if my unselected buttons were red and the selected button was pink, it
could technically pass, but I'm sure I agree with that.

F73 could be applied to the black and white buttons too, and as noted in
"Note 1", the buttons would differ by both color and lightness so could
technically pass.

This just seems weird. White is a color and black is a color and that's
the only difference between the buttons and that difference has meaning, so
it seems like it would fail.

I know the buttons could pass if the selected button had a bold or italic
font, such this:

[image: image.png]
(the bold font of the C button is hard to distinguish)

[image: image.png]
(italic font is a little easier to spot but still not great)

Or if there was some other visual indicator to show its selection, such as
an extra underline under the button such as this:

[image: image.png]

I can't think of a case where a user that has sight, even if severe color
deficiencies, could not tell the difference between the buttons without the
font change or underline. (Assuming aria-pressed is specified too).

--00000000000068f3f105a0660246
Content-Type: image/png; name="image.png"
Content-Disposition: inline; filename="image.png"
Content-Transfer-Encoding: base64
Content-ID: <ii_k7k1xqb11>
X-Attachment-Id: ii_k7k1xqb11

iVBORw0KGgoAAAANSUhEUgAAAKcAAAAiCAYAAAA6a8mHAAAEEklEQVR4nO2cT0gjVxzHf7dBpEgC
OUn2EkoPHqTUg2xOWcoeLMQVukihORVbPHgpLAUpBAqhROhCaSA5NL3k4GULCbs9VNbiwoKGtf9g
uy4NYWkCEihYISJKDp8ekrhqJ6kzvsm8gfeBd0nC8+tvPs7vvTdBwWDQFPE7gMEwCCOnQVuMnAZt
uSBns9nUZtRqNdvAfucKWsZisah9xkH11FLOWq1GPp/XuqhByFgsFrXPOKyetnL6TT6f/9+i+s1V
MoqIryMIdexjl9XI6RIjp1qMnAoxcqrFyKkQI6dajJwKMXKqxXM5n2enu4UJLbNx4noaD4paJmV3
AccjTN3JstV0HtY7OcPMZSr82jjkuNOdr3N8SKtepZKZI+yznGfX+NywJiaZuvUxucevOHI8YxeP
5dwlHesHDrF8DTs9kzP2LktLS73xAbfenMASQSIrbDqM64mcY2/z1bN/6ACctmm8qFKtVvmt/veZ
qL98qYOcId55/1wdpyKM935m5HaB311cem/l3E0TEyGeyZAUIbS8gVs9PZMzVb70eotS0kIkyuq2
+ozO5Bzj7qN9ANq1dT4MX3o/fJPPKjWeaCHnNNnnF18/aW6RvR3pCpoq03I4r6dy7qZjiMTJ1Q8o
JQWxUpRd2jk6OWF7NYrIDPdfqs/oSM4b3/BHB2g/5d6YvmvOQXL23uX+jIVIjPSus3k9lLPX0uM5
6kCjkEDEIuXSztHIecSrxxkSISHy0Q8ceJDRiUg38nsA7FfmlYjpj5xwsrFMSISow1bknZy9lj7d
T9wokBDBSpVdtfaRbYhEeOO9AnsuVvGq5Zyv7AMdnn2hRky/5OSgRFIESRRoOJjXMzm7Lf184AaF
hPvWPpoN0RLJ2d5CPpKi7HCRpFrOz3dOgX0q8wGXs1/r6SwDP2KDR3Jusxr9b5jrtPZRrjlbDxYJ
ifMNnLlzDvhA/86ZLDlaKnkj5/Yq0SEFshbWPVnPOWOwnCr/0i9nNGvOq+OJnN3d7vlzr9fnX7MR
QawF1h3aOVI5Tx6wqIGcMlOiDgHfrfeP5rTYrfdaeiyNXZbuL2Kx4NDO0cl5xM+ZGSwRYg6r6cU5
572nbWDYOedLfnLQ9kcq59Ee3y1OYom604/rybm5QmjYha3niLto7aPZECWZjYx3lx5vfcqmB3d3
x3e7sbt8/9dpd5JAPiGymFws8acOT4g2V0LDF8fUycWdt/bRHCVZTExOcSf9UIujpNcjzNzXT6i3
2vQ0pXN8SOPFj3z7yU29n61vNZU+FTTfSnKJ+VaSWoycCjFyqsXIqRAjp1qMnAoxcqrlSnLu7Oyc
fdDvYUdQMq6trfmeLUh1tMt6QU7dwtoRhIw6iRmUOtplNf+OxqAtRk6Dthg5Ddpi5DRoy7/zk+cz
eg5b1wAAAABJRU5ErkJggg==
--00000000000068f3f105a0660246
Content-Type: image/png; name="image.png"
Content-Disposition: inline; filename="image.png"
Content-Transfer-Encoding: base64
Content-ID: <ii_k7k2jhhy2>
X-Attachment-Id: ii_k7k2jhhy2

iVBORw0KGgoAAAANSUhEUgAAAKoAAAAhCAYAAABJATCZAAAEQUlEQVR4nO2cP2hbVxSHz/YwohgZ
NCVuB1E0ZBAhHoRNB5dMLchxKIRANAQjiqFaCl00VFAQRR5CQw3yEE8eTCAFmTaDjQUpCcglbqHU
jQNCFEshiA5KwSY4ZPg6SLFl5cn2ld59f+D+4A7Se7rvp/O+d8899woJRkYBkHhtwMjoPDKgGgVC
BlSjQMgW1Eaj4ZtWrVZtjXvtK2geG40Gy8vLfUHw2ttZMfU1qNVqlWKx6OvABsFjo9GGtJ9Pv3m1
i+mpoHqtYrF4JgRe6zweRcTzdprPbq9+kJ1XA+qQMqA6LwOqBhlQnZcBVYMMqM7LgKpBBlTn5Rqo
O4V4O0DheTYOB+5GA6glUnY3MhTh0rUCjxrqZnWCOvbZXdaf1fnv9dujPt/st6g/W+fel5OMeQ1q
KWUby48SSb69/xetAe+9S6Buk4u+Mx5mfghStYEavUo6ne60m3z68SiWCBLJUFa0qwfUMW6t7fHm
jGv/8b0/QI1eTR/FM5m4wKjVvqYVy7DRVOsS3AJ1O0dUhKl8nqQI4fkNBkVVG6ipUs/7TVaSFiLj
ZCvOe1QFNVbcpWsMZe/XPNcvjiAywsXredar+4B/QH0vnAe73J+LYYlgTRT404GH33FQt3NRRKZY
rLVYSQpipSg5mAKG89gPVKhkxxGZ4M5z5z0qgTqSpfL6uI/9J98w8t55Mb7afMFTv4IKQIuHcxFE
LGZXW0rdugBqJ+1PLVID6kvTiFikBiTVHVAP+Gczz3RYiMw9RC2kGkD97mnXaLrH6ieDzW+9BxWo
LTIlgiRXlOKqH9RO2o8Xdtqv60tMi2ClSgOlf9eKKRE++HyJ3QM9HlWAmll7edzBq03SDkDqGahU
yI4LEs5QVuhWO6jttB/nHadQZ2l68PTvTjGVJpmIEBJBIilKipN/raC+XGMm0KDuUIgLIin6nmIj
zaB2np54gZ2ud4dJ/27OUZsPbhAW9eLPjKjnGFHHs6jUqHpBrWQZPyVQ1uyqlvmfmvqDenSs50Fz
wqOZo/pojtqumsNc+SJ9Iq2m0zdJRASxZlEs/twF9fABN/wA6oc/8vcxqX2q/jFu/eL3qv+QSjaK
z6r+zhAfzbFtc7S9U+WM4cE9Qn9QD/g9P4ElQjRn9w2G86g6+s389OLEOmpz6+7JddTnr3iLj9dR
Dxs8yk0SEsGauKP04INOUMsZwqfd5E4KUE3/7hRTSRKRUHt6EvuasoZRXz1Vx8g++bcLVnv5BdR+
O1OhyRyP/bQzVc6EOVnt96rG4pR6+ndnecpi9MIlruV+9sXy1HEb4fLtezZ7/U1qv63xw+3LNlMC
b0A90Y72+ncZIJyA+fWUFplfTzkvA6oGGVCdlwFVgwyozsuAqkEGVOelBOrW1tbRB7xuQfa4sLDg
ubezfPoxnr1ebUH1s+EgefQbpP18+jGevV7NX/oYBUIGVKNAyIBqFAj9D6VC3SqcAoDOAAAAAElF
TkSuQmCC
--00000000000068f3f105a0660246
Content-Type: image/png; name="image.png"
Content-Disposition: inline; filename="image.png"
Content-Transfer-Encoding: base64
Content-ID: <ii_k7k2l03a3>
X-Attachment-Id: ii_k7k2l03a3

iVBORw0KGgoAAAANSUhEUgAAAKgAAAAgCAYAAACGqDMBAAAERklEQVR4nO2cP2gbZxiH3+0QphgF
NDnqIooHD8bUg6nIoFAytKDEocV00FRcMNRDCqEgCoKAMPIQCBikoWoHDVoyyLQdbGzw4CKLuq5T
gl0q1FAJgtqAE5ARDhqeDie5siPJudP9E3wP3CKJzz+/9/je74+woFB4GHE7gEIxiAuC1mo1z1zl
crlnYLdzjVrGbDbr+YyD6ulJQcvlMul02tOFHYWM2WzW8xmvqmdPQd0mnU5fWVi3eZuMIuLqNQp1
7NAvqxLUJEpQa1GCWowS1FqUoBajBLUWJajFKEGtxRFBn6am9eL4l9g8Mz2MDYUtEOt1E8cCTN1J
sVMzHtYZQa/xwdd5SpU6jdftwVtNXlWP2Hh0l+s+5wU9v8ddlzY+wdTNL1jbesap4RF1HBB0n0So
E9rP0hCG2iZo6EMWFxfb12fcfG8cTQQJLLNtMK7tgk5+yXq5AUCr+YLKYYlSqcRRtYHu6ku2Ft0S
1M/7n3TVcSrAWPtnBm5leGLi1tsv6H6CkAjhZJKoCP6lTcwqapugscKl1+vkohoiQeJF6zOalzPO
7r8taL3k928/4tql930z99j462ceuNDidUGnST29+PpZbYfUrYAuaaxA3eC4tgu6nwghEmatckIu
KogWo2DSUOcEhWI8iMgsD/+wPqM5QSdZOWgADQ5WJj03B+0naPtdHs5qiIRI7Bsb12ZB2+09vEYF
qGYiiGjETBrqjKCnPNtKEvELgc9/4sSGjGak8t3fpQE0du/jG3IO67ygcLa5hF+EoMGWZK+g7fY+
3UldzRARQYsVTLV5xxZJIrzzcYZjEzN7ewT1sXLQAv4mf2M4Od0SlJMcUREkkqFqYFxbBdXbe3fo
KpmI+TbvzCJpkehce3IfiFEwOGmyR9AH/NICnq9ze0g5XRO0U+vpFH0/0gMbBS0SD74ZaJg27+Qc
tP54Ab8YX9TZIujtdZ4DHKwMLafrT9BoztC0yT5Bi3GCA4qkzedtmd8Zo7+gVv/Fd2c0LNXKgT7A
CAvquTmovgru3hf7f39sLiCINk/eoKGOCnr2mAWvCPrpj/wDI9ziO9t2nlnFt9t7KEGvPPovozFv
0FDnBD3l1+QsmgghgxW1RVBfnGIToMmTRzOXVvE+rt9NsnG0wTdeFPT0mO8WJtDE2l2R4QTdXsY/
6OZW1gibaPPOLJKizAXG9GnI5Fds2/CUN/PUu/F9uX1S1KL5osJhqUTpsEK9c9Z5nOZd1wXtd5Kk
MbGQ40+vnCRtL/sHT5ipsBY23uad2WbSGJ+Y4k7iBw9tM+lPypl7eX6rvqLZag/4ukG9UmI9efX5
uzOCXvw552fxOzXLTw/Vt5lMor7NZC1KUItRglqLEtRilKDWogS1GCWotby1oHt7e+cfdvvqxahk
XF1ddT3bKNWxX9YLgnotcC9GIaOX5ByVOvbLqv71jcLTKEEVnkYJqvA0SlCFp/kPOUE0jA5+QpQA
AAAASUVORK5CYII=
--00000000000068f3f105a0660246
Content-Type: image/png; name="image.png"
Content-Disposition: inline; filename="image.png"
Content-Transfer-Encoding: base64
Content-ID: <ii_k7k2n5zx4>
X-Attachment-Id: ii_k7k2n5zx4

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
gg==
--00000000000068f3f105a0660246--