- commit
- 51d76efd9c3f4e59b25a46b6163641a8d6c5982b
- parent
- 2989da99d661a7abdb2949a7e14ed20499d13c9a
- Author
- Tobias Bengfort <tobias.bengfort@posteo.de>
- Date
- 2022-08-06 06:17
use nbsp for WCAG 2.x
Diffstat
| M | README.md | 16 | ++++++++-------- |
| M | analysis.md | 58 | +++++++++++++++++++++++++++++----------------------------- |
2 files changed, 37 insertions, 37 deletions
diff --git a/README.md b/README.md
@@ -53,19 +53,19 @@ function contrast(fg, bg) {
53 53
54 54 ([Source](https://github.com/Myndex/SAPC-APCA/blob/master/documentation/APCA-W3-LaTeX.md))
55 55
56 -1 ## Migrating from WCAG 2.x
-1 56 ## Migrating from WCAG 2.x
57 57
58 -1 - WCAG 2.x produces a ratio between 1:1 and 21:1. APCA produces a value roughly
-1 58 - WCAG 2.x produces a ratio between 1:1 and 21:1. APCA produces a value roughly
59 59 between -100 and 100.
60 -1 - Unlike WCAG 2.x, APCA reports different values when you switch foreground and
-1 60 - Unlike WCAG 2.x, APCA reports different values when you switch foreground and
61 61 background.
62 62 - The result of APCA is negative for light text on dark background. You will
63 63 usually work with the absolute value though.
64 -1 - WCAG 2.x defined three thresholds: 3:1, 4.5:1, and 7:1. These roughly
-1 64 - WCAG 2.x defined three thresholds: 3:1, 4.5:1, and 7:1. These roughly
65 65 correspond to 45, 60, and 75 in APCA.
66 -1 - Compared to WCAG 2.x, APCA reports drastically lower contrast for darker
-1 66 - Compared to WCAG 2.x, APCA reports drastically lower contrast for darker
67 67 colors. It also reports slightly higher contrast for lighter colors.
68 -1 - With WCAG 2.x, 27% of all color combinations have a contrast of at least 3,
-1 68 - With WCAG 2.x, 27% of all color combinations have a contrast of at least 3,
69 69 12% have at least 4.5, and 4% have at least 7. With APCA, only 21% of all
70 70 color combinations have a contrast of at least 45, 8% have at least 60, and
71 71 2% have at least 75.
@@ -74,7 +74,7 @@ Also see my [detailed analysis](analysis.md).
74 74
75 75 ## Examples
76 76
77 -1 [](https://xi.github.io/apca-introduction/examples/)
-1 77 [](https://xi.github.io/apca-introduction/examples/)
78 78
79 79 ## Status
80 80
@@ -85,7 +85,7 @@ Neither is officially recommended by the W3C yet.
85 85
86 86 Evaluating a contrast algorithm is extremly difficult because contrast
87 87 perception varies from person to person and also depends on the lighing
88 -1 conditions. Whether APCA is actually better than WCAG 2.x is therefore hard to
-1 88 conditions. Whether APCA is actually better than WCAG 2.x is therefore hard to
89 89 tell. I personally could not say from the examples above which one works better
90 90 for me. A rigorous scientific evaluation is not yet available
91 91 ([issue](https://github.com/w3c/silver/issues/574)).
diff --git a/analysis.md b/analysis.md
@@ -2,7 +2,7 @@ 2 2 3 3 I am a regular web developer with a bachelor's degree in math, but without any 4 4 training in the science around visual perception. That's why I cannot evaluate5 -1 whether APCA is *better* than WCAG 2.x. Instead this is a systematic-1 5 whether APCA is *better* than WCAG 2.x. Instead this is a systematic 6 6 comparison of their mathematical properties. 7 7 8 8 ## Context: The Web Content Accessibility Guidelines (WCAG) @@ -38,7 +38,7 @@ When we speak about contrast, we actually mean a few different things: 38 38 decision? 39 39 - Which parts of the UI need to be checked? 40 4041 -1 In the following sections I will take a closer look at how WCAG 2.x and APCA-1 41 In the following sections I will take a closer look at how WCAG 2.x and APCA 42 42 answer each of these questions. 43 43 44 44 ## The contrast formula @@ -93,7 +93,7 @@ In 1961 Stevens published a different model that was found to more accurately 93 93 predict human vision. It has the form `L = a * pow(Y, alpha) + b`. The exponent 94 94 `alpha` has a value of approximately 1/3. 95 9596 -1 ### WCAG 2.x-1 96 ### WCAG 2.x 97 97 98 98 ```js 99 99 function gamma(x) { @@ -121,7 +121,7 @@ function contrast(fg, bg) { 121 121 }; 122 122 ``` 123 123124 -1 In WCAG 2.x we see the same general structure as in the naive approach, but the-1 124 In WCAG 2.x we see the same general structure as in the naive approach, but the 125 125 individual steps are more complicated: 126 126 127 127 Colors on the web are defined in the [sRGB color space]. The first part of this @@ -217,7 +217,7 @@ To make it easier to compare the two formulas, I will normalize them: 217 217 - preserve polarity 218 218 - scale to a range of -1 to 1 219 219220 -1 WCAG 2.x therefore becomes:-1 220 WCAG 2.x therefore becomes: 221 221 222 222 ```js 223 223 function gamma(x) { @@ -304,7 +304,7 @@ corresponds to background luminance, the y-axis corresponds to foreground 304 304 luminance (both using the APCA formula). The color of the dots indicated the 305 305 differences between the respective formulas. 306 306307 -1 The plot on the bottom right compares APCA to WCAG 2.x. As we can see, the-1 307 The plot on the bottom right compares APCA to WCAG 2.x. As we can see, the 308 308 biggest differences are in areas where one color is extremely light or 309 309 extremely dark. For light colors, APCA predicts an even higher contrast 310 310 (difference is in the same direction as contrast polarity). For dark colors, @@ -312,7 +312,7 @@ APCA predicts a lower contrast (difference is inverse to contrast polarity). 312 312 The difference goes up to 20%. 313 313 314 314 The other three plots compare APCA to a modified version of APCA where one of315 -1 the steps has been replaced by the corresponding step from WCAG 2.x. This way-1 315 the steps has been replaced by the corresponding step from WCAG 2.x. This way 316 316 we can see that `sRGBtoY` contributes 4% to the difference, `YtoL` contributes 317 317 15%, and `contrast` contributes 3%. 318 318 @@ -324,18 +324,18 @@ I took a closer look at it. 324 324 I plotted curves for both the Weber-Fechner model (log) and the Stevens model 325 325 (pow) with different parameters. 326 326327 -1 - The log curve with a flare of 0.05 (WCAG 2) is closer to the pow curve with-1 327 - The log curve with a flare of 0.05 (WCAG 2) is closer to the pow curve with 328 328 an exponent of 1/3 329 329 - The log curve with a flare of 0.4 is closer to the pow curves with 330 330 exponents 0.56 and 0.68 (similar to APCA) 331 331 - The pow curve with an exponent of 1/3 **and** a flare of 0.025 is somewhere 332 332 in the middle. 333 333334 -1 This shows that a big part of the different results between WCAG 2.x and APCA-1 334 This shows that a big part of the different results between WCAG 2.x and APCA 335 335 are caused by a different choice in parameters. If we were to change the flare336 -1 value in WCAG 2.x to 0.4 we would get results much closer to APCA. And if we-1 336 value in WCAG 2.x to 0.4 we would get results much closer to APCA. And if we 337 337 were to change the exponents in APCA to 1/3 we would get results much closer to338 -1 WCAG 2.x.-1 338 WCAG 2.x. 339 339 340 340 ## Spatial frequency 341 341 @@ -364,21 +364,21 @@ wildly different interpretations of these values. Since fonts depend on user 364 364 preference, we cannot know beforehand which fonts will be used. We also don't 365 365 know the size of device pixels or how far the user is from the screen. 366 366367 -1 So how do WCAG 2.x and APCA tackle this topic?-1 367 So how do WCAG 2.x and APCA tackle this topic? 368 368369 -1 ### WCAG 2.x-1 369 ### WCAG 2.x 370 370371 -1 WCAG 2.x makes the distinction between regular and [large text]. Large text is-1 371 WCAG 2.x makes the distinction between regular and [large text]. Large text is 372 372 defined as anything above 18 point or 14 point bold. The definition comes with 373 373 a lot of notes that explain the limits of that approach though, e.g. that some 374 374 fonts are extremely thin. 375 375376 -1 WCAG 2.x also comes with some rules that allow users to adapt spatial frequency-1 376 WCAG 2.x also comes with some rules that allow users to adapt spatial frequency 377 377 to their needs: [1.4.4] requires that users can resize the text, [1.4.10] 378 378 requires that they can zoom the whole page, and [1.4.12] requires that they can 379 379 adjust text spacing. 380 380381 -1 So WCAG 2.x doesn't really attempt to model spatial frequency for web content.-1 381 So WCAG 2.x doesn't really attempt to model spatial frequency for web content. 382 382 It elegantly works around the issue by handing control over to the users who 383 383 have all the facts. 384 384 @@ -408,10 +408,10 @@ above is complicated and leaves a lot of wiggle room, especially in steps 2 and 408 408 409 409 So far we have mainly looked at text. But other parts of a website also need to 410 410 be distinguishable. The concept of spatial frequency was explicitly picked411 -1 because it can cover those cases. What do WCAG 2.x and APCA have to say about-1 411 because it can cover those cases. What do WCAG 2.x and APCA have to say about 412 412 this? 413 413414 -1 ### WCAG 2.x-1 414 ### WCAG 2.x 415 415 416 416 [1.4.11] is specifically about this issue. It basically says that all non-text 417 417 content that is not inactive, decorative, or controlled by the browser must @@ -427,9 +427,9 @@ find any discussion of that though. 427 427 428 428 ## Thresholds 429 429430 -1 ### WCAG 2.x-1 430 ### WCAG 2.x 431 431432 -1 WCAG 2.x defines 3 thresholds: 3, 4.5, and 7.-1 432 WCAG 2.x defines 3 thresholds: 3, 4.5, and 7. 433 433 434 434 - non-text content must have a contrast of at least 3 435 435 - large text must have a contrast of at least 3 (AA) or 4.5 (AAA) @@ -452,9 +452,9 @@ How these values were derived is not completely clear: 452 452 APCA defines 6 thresholds: 15, 30, 45, 60, 75, 90. 453 453 454 454 The required threshold depends on the spatial frequency (see above). 45, 60,455 -1 and 75 loosely correspond to 3, 4.5, and 7 in WCAG 2.x.-1 455 and 75 loosely correspond to 3, 4.5, and 7 in WCAG 2.x. 456 456457 -1 Again I generated random color pairs and used them to compare APCA to WCAG 2.x:-1 457 Again I generated random color pairs and used them to compare APCA to WCAG 2.x: 458 458 459 459 | | < 15 | 15-30 | 30-45 | 45-60 | 60-75 | 75-90 | > 90 | total | 460 460 | ------:| -------:| -------:| ------:| ------:| ------:| ------:| ------:| -------:| @@ -464,8 +464,8 @@ Again I generated random color pairs and used them to compare APCA to WCAG 2.x: 464 464 | > 7 | 0.0 | 0.0 | 0.0 | 0.2 | 1.8 | 1.6\* | 0.1\* | 3.8 | 465 465 | total | 35.3 | 25.8 | 18.3 | 12.3 | 6.4 | 1.8 | 0.1 | 83.5\* | 466 466467 -1 The columns correspond to APCA thresholds, the rows correspond to WCAG 2.x468 -1 thresholds. For example, 6.2 % of the generated color pairs pass WCAG 2.x with-1 467 The columns correspond to APCA thresholds, the rows correspond to WCAG 2.x -1 468 thresholds. For example, 6.2 % of the generated color pairs pass WCAG 2.x with 469 469 a contrast above 3, but fail APCA with a contrast below 45. 470 470 471 471 The \* indicate cases where both a algorithms agree on a threshold level. The @@ -483,7 +483,7 @@ agree, so it can be seen as an indicator of how similar the algorithms are. 483 483 | > 13.2 | 0.0 | 0.0 | 0.0 | 0.0 | 0.0 | 0.0 | 0.1\* | 0.2 | 484 484 | total | 35.3 | 25.8 | 18.3 | 12.3 | 6.4 | 1.8 | 0.1 | 91.0\* | 485 485486 -1 The second table compares APCA to a modified WCAG 2.x contrast with a flare-1 486 The second table compares APCA to a modified WCAG 2.x contrast with a flare 487 487 value of 0.4. The thresholds were derived by applying the normalization steps 488 488 described above to the APCA thresholds. As expected, the difference is reduced 489 489 significantly, though there is still a considerable difference left. @@ -500,7 +500,7 @@ significantly, though there is still a considerable difference left. 500 500 | total | 34.9 | 25.8 | 18.9 | 12.3 | 6.2 | 1.8 | 0.1 | 90.4\* | 501 501 502 502 The third table compares APCA to itself, but with foreground and background503 -1 switched. WCAG 2.x does not make a difference between foreground and-1 503 switched. WCAG 2.x does not make a difference between foreground and 504 504 background, so this comparison would be pointless there. APCA on the other hand 505 505 uses different exponents for foreground and background. This table shows that 506 506 this does have a small but still significant impact on the results. @@ -509,7 +509,7 @@ this does have a small but still significant impact on the results. 509 509 510 510 In this analysis I took a deeper look at the Accessible Perceptual Contrast 511 511 Algorithm (APCA), a new algorithm to predict visual contrast. I compared it to512 -1 an existing algorithm that has been part of WCAG 2.x, the current standard for-1 512 an existing algorithm that has been part of WCAG 2.x, the current standard for 513 513 accessibility testing for the web. 514 514 515 515 Though still in early development, APCA is very different from the older @@ -526,8 +526,8 @@ algorithm in many key aspects: 526 526 - It uses a more sophisticated link between spatial frequency and minimum 527 527 color contrast that might allow for more nuanced thresholds. 528 528529 -1 The new contrast formula agrees with WCAG 2.x for 83.5% of randomly picked530 -1 color pairs. That number rises to 91% for a modified WCAG 2.x formula with a-1 529 The new contrast formula agrees with WCAG 2.x for 83.5% of randomly picked -1 530 color pairs. That number rises to 91% for a modified WCAG 2.x formula with a 531 531 flare value of 0.4. As far as I understand, this is not a realistic value for 532 532 flare. So the physical interpretation might be incorrect. This would however 533 533 explain why APCA reports lower contrast for darker colors.