![Color
contrast
Step 2
export function luminance(
sRGB: Type.RGB
): number {
return calculateRGBEntry(sRGB[0], Type.YValues.r)
+ calculateRGBEntry(sRGB[1], Type.YValues.g)
+ calculateRGBEntry(sRGB[2], Type.YValues.b);
}](https://image.slidesharecdn.com/youcantreadthis-a11yautomation-jsfest-190409091935/85/JS-Fest-2019-Mauricio-Palma-You-can-t-read-this-sentence-A11y-automation-88-320.jpg)
![N colors
Aa Aa Aa Aa
[ ]](https://image.slidesharecdn.com/youcantreadthis-a11yautomation-jsfest-190409091935/85/JS-Fest-2019-Mauricio-Palma-You-can-t-read-this-sentence-A11y-automation-90-320.jpg)
![SortStep 3
export function quickSort(
arr: Type.Color[],
cb: (sRGB: Type.RGB) => number,
lo: number,
hi: number
): void {
if (lo < hi) {
const pivot = cb(arr[Math.floor((lo + hi) / 2)].rgb);
const p = partition(arr, lo, hi, pivot, cb);
quickSort(arr, cb, lo, p.hi);
quickSort(arr, cb, p.lo, hi);
}
}
export function sort(
arr: Type.Color[],
cb: (sRGB: Type.RGB) => number) {
return quickSort(arr, cb, 0, arr.length - 1);
}](https://image.slidesharecdn.com/youcantreadthis-a11yautomation-jsfest-190409091935/85/JS-Fest-2019-Mauricio-Palma-You-can-t-read-this-sentence-A11y-automation-93-320.jpg)
![SortStep 3
export function quickSort(
arr: Type.Color[],
cb: (sRGB: Type.RGB) => number,
lo: number,
hi: number
): void {
if (lo < hi) {
const pivot = cb(arr[Math.floor((lo + hi) / 2)].rgb);
const p = partition(arr, lo, hi, pivot, cb);
quickSort(arr, cb, lo, p.hi);
quickSort(arr, cb, p.lo, hi);
}
}
export function sort(
arr: Type.Color[],
cb: (sRGB: Type.RGB) => number) {
return quickSort(arr, cb, 0, arr.length - 1);
}](https://image.slidesharecdn.com/youcantreadthis-a11yautomation-jsfest-190409091935/85/JS-Fest-2019-Mauricio-Palma-You-can-t-read-this-sentence-A11y-automation-94-320.jpg)
![SortStep 3
export function quickSort(
arr: Type.Color[],
cb: (sRGB: Type.RGB) => number,
lo: number,
hi: number
): void {
if (lo < hi) {
const pivot = cb(arr[Math.floor((lo + hi) / 2)].rgb);
const p = partition(arr, lo, hi, pivot, cb);
quickSort(arr, cb, lo, p.hi);
quickSort(arr, cb, p.lo, hi);
}
}
export function sort(
arr: Type.Color[],
cb: (sRGB: Type.RGB) => number) {
return quickSort(arr, cb, 0, arr.length - 1);
}](https://image.slidesharecdn.com/youcantreadthis-a11yautomation-jsfest-190409091935/85/JS-Fest-2019-Mauricio-Palma-You-can-t-read-this-sentence-A11y-automation-95-320.jpg)
![SortStep 3
export function partition(
arr: Type.Color[],
lo: number,
hi: number,
pivot: number,
cb: (sRGB: Type.RGB) => number): { lo: number, hi: number} {
if (lo <= hi) {
if (cb(arr[lo].rgb) < pivot) {
return partition(arr, lo + 1, hi, pivot, cb);
}
if (cb(arr[hi].rgb) > pivot) {
return partition(arr, lo, hi - 1, pivot, cb);
}
if (lo <= hi) {
swap(arr, lo, hi);
return partition(arr, lo + 1, hi - 1, pivot, cb);
}
}
return { lo, hi };
}](https://image.slidesharecdn.com/youcantreadthis-a11yautomation-jsfest-190409091935/85/JS-Fest-2019-Mauricio-Palma-You-can-t-read-this-sentence-A11y-automation-96-320.jpg)
![SortStep 3
export function quickSort(
arr: Type.Color[],
cb: (sRGB: Type.RGB) => number,
lo: number,
hi: number
): void {
if (lo < hi) {
const pivot = cb(arr[Math.floor((lo + hi) / 2)].rgb);
const p = partition(arr, lo, hi, pivot, cb);
quickSort(arr, cb, lo, p.hi);
quickSort(arr, cb, p.lo, hi);
}
}
export function sort(
arr: Type.Color[],
cb: (sRGB: Type.RGB) => number) {
return quickSort(arr, cb, 0, arr.length - 1);
}](https://image.slidesharecdn.com/youcantreadthis-a11yautomation-jsfest-190409091935/85/JS-Fest-2019-Mauricio-Palma-You-can-t-read-this-sentence-A11y-automation-97-320.jpg)
![SearchStep 4 function lowerSearch<T extends QuickSearch>(
arr: Array<T>,
el: T,
val: number,
lo: number,
hi: number): number | [] {
const mid = Math.floor((lo + hi) / 2);
const prev = mid - 1;
const next = mid + 1;
const midRatio = contrastRatio(arr[mid].rgb, el.rgb);
if (lo < hi) {
if (midRatio > val && prev >= 0) {
if (contrastRatio(arr[prev].rgb, el.rgb) < val) {
return mid;
}
return lowerSearch(arr, el, val, lo, mid);
}
if (midRatio < val && next < arr.length) {
if (contrastRatio(arr[next].rgb, el.rgb) > val) {
return next;
}
return lowerSearch(arr, el, val, mid, hi)
}
if (mid === val) {
return mid;
}
}
return [];
};
export function search(
arr: Type.Color[],
el: Type.Color,
val: Type.A11yRatio,
type?: Type.Search): number | [] {
if (type === Type.Search.upper) {
return upperSearch(arr, el, val, 0, arr.length);
}
return lowerSearch(arr, el, val, 0, arr.length);
};](https://image.slidesharecdn.com/youcantreadthis-a11yautomation-jsfest-190409091935/85/JS-Fest-2019-Mauricio-Palma-You-can-t-read-this-sentence-A11y-automation-102-320.jpg)
![SearchStep 4 function lowerSearch<T extends QuickSearch>(
arr: Array<T>,
el: T,
val: number,
lo: number,
hi: number): number | [] {
const mid = Math.floor((lo + hi) / 2);
const prev = mid - 1;
const next = mid + 1;
const midRatio = contrastRatio(arr[mid].rgb, el.rgb);
if (lo < hi) {
if (midRatio > val && prev >= 0) {
if (contrastRatio(arr[prev].rgb, el.rgb) < val) {
return mid;
}
return lowerSearch(arr, el, val, lo, mid);
}
if (midRatio < val && next < arr.length) {
if (contrastRatio(arr[next].rgb, el.rgb) > val) {
return next;
}
return lowerSearch(arr, el, val, mid, hi)
}
if (mid === val) {
return mid;
}
}
return [];
};
export function search(
arr: Type.Color[],
el: Type.Color,
val: Type.A11yRatio,
type?: Type.Search): number | [] {
if (type === Type.Search.upper) {
return upperSearch(arr, el, val, 0, arr.length);
}
return lowerSearch(arr, el, val, 0, arr.length);
};](https://image.slidesharecdn.com/youcantreadthis-a11yautomation-jsfest-190409091935/85/JS-Fest-2019-Mauricio-Palma-You-can-t-read-this-sentence-A11y-automation-103-320.jpg)
![SearchStep 4 function lowerSearch<T extends QuickSearch>(
arr: Array<T>,
el: T,
val: number,
lo: number,
hi: number): number | [] {
const mid = Math.floor((lo + hi) / 2);
const prev = mid - 1;
const next = mid + 1;
const midRatio = contrastRatio(arr[mid].rgb, el.rgb);
if (lo < hi) {
if (midRatio > val && prev >= 0) {
if (contrastRatio(arr[prev].rgb, el.rgb) < val) {
return mid;
}
return lowerSearch(arr, el, val, lo, mid);
}
if (midRatio < val && next < arr.length) {
if (contrastRatio(arr[next].rgb, el.rgb) > val) {
return next;
}
return lowerSearch(arr, el, val, mid, hi)
}
if (mid === val) {
return mid;
}
}
return [];
};
export function search(
arr: Type.Color[],
el: Type.Color,
val: Type.A11yRatio,
type?: Type.Search): number | [] {
if (type === Type.Search.upper) {
return upperSearch(arr, el, val, 0, arr.length);
}
return lowerSearch(arr, el, val, 0, arr.length);
};](https://image.slidesharecdn.com/youcantreadthis-a11yautomation-jsfest-190409091935/85/JS-Fest-2019-Mauricio-Palma-You-can-t-read-this-sentence-A11y-automation-104-320.jpg)
![Enhanced
colors
Step 5
export function createEnhanced(
rawColor: Type.Color,
aaa: Type.Color[] | [],
aa: Type.Color[] | []
): Type.colorEnhanced {
const rgb = rawColor.rgb;
return {
name: rawColor.name,
rgb,
aaa,
aa,
toRGB(): string {
return toRGBString(rgb);
},
toHEX(): string {
return tinyColor(toRGBString(rgb)).toHexString();
},
toHSL(): string {
return tinyColor(toRGBString(rgb)).toHslString();
},
toRGBA(alpha: number): string {
const color = tinyColor(toRGBString(rgb));
color.setAlpha(alpha);
return color.toRgbString()
}
}
}](https://image.slidesharecdn.com/youcantreadthis-a11yautomation-jsfest-190409091935/85/JS-Fest-2019-Mauricio-Palma-You-can-t-read-this-sentence-A11y-automation-106-320.jpg)
![Enhanced
colors
Step 5
export function createEnhanced(
rawColor: Type.Color,
aaa: Type.Color[] | [],
aa: Type.Color[] | []
): Type.colorEnhanced {
const rgb = rawColor.rgb;
return {
name: rawColor.name,
rgb,
aaa,
aa,
toRGB(): string {
return toRGBString(rgb);
},
toHEX(): string {
return tinyColor(toRGBString(rgb)).toHexString();
},
toHSL(): string {
return tinyColor(toRGBString(rgb)).toHslString();
},
toRGBA(alpha: number): string {
const color = tinyColor(toRGBString(rgb));
color.setAlpha(alpha);
return color.toRgbString()
}
}
}](https://image.slidesharecdn.com/youcantreadthis-a11yautomation-jsfest-190409091935/85/JS-Fest-2019-Mauricio-Palma-You-can-t-read-this-sentence-A11y-automation-107-320.jpg)
JS Fest 2019. Mauricio Palma. You can’t read this sentence - A11y automation
- 5. 7 years ago…
- 6. 2012
- 10. She had a long history…
- 11. The grandma
- 12. 2012 From
- 13. To
- 14. They founded their label and…
- 15. The Man
- 18. Today
- 19. Mauricio Palma Co-founder and all kind of things @WDLK Product Engineer @sinnerschrader everywhere else @palmaswell
- 20. But
- 21. Why?
- 22. Back in The Day
- 23. Way harder!
- 24. opportunity
- 26. We use our our abilities
- 28. You can’t read this sentence A11y automation April, 2019
- 32. Literally hurts!
- 33. 217 million
- 35. Blurry Vision
- 37. Key Takeaways Publish all information and content from your site in your HTML Use semantic HTML and the appropriate ARIA landmarks Write screen reader friendly markup Provide keyboard navigation
- 40. Key Takeaways Besides the mentioned semantic HTML and screen reader friendly markup You should follow a linear logical layout, that supports at least 200% magnification
- 43. Key Takeaways Always put form elements in context. Meaning putting buttons, inputs, and notifications together in a logical manner For action elements in your interface use a good combination of colors, shapes, and text Do not rely on colors to convey meaning
- 44. Dyslexia
- 46. Key Takeaways Align your text to the left and keep a consistent layout Keep content short, clear and simple Consider producing materials in other formats (for example audio or video) Let the users change the contrast between background and text
- 47. Colorblindness
- 50. Key Takeaways Make sure that colors are not your only method of conveying important information.
- 53. Persona spectrum Permanent Temporary Situational
- 54. We usetechnologyto includemore people
- 55. A11y everywhere
- 56. You Your codeUnit testsShipCode Test
- 60. O(n^2)
- 61. 2500
- 62. Forward A11y color contrast automation github.com/palmaswell/forward
- 64. Make it easier for users to see and hear content including separating foreground from background. Guideline 1.4 Distinguishable:
- 65. AA >= 4.5:1
- 66. AAA >= 7:1
- 67. AA >= 3:1 Large-scale text
- 68. AAA >= 4.5:1 Large-scale text
- 69. 24px || 19px bold Large-scale text
- 70. Logos and brand Other exceptions
- 71. Inactive UI elements Other exceptions
- 72. Can your read this? Color contrast 1.6 ratio
- 73. Can your read this? Color contrast 8.05 ratio AAA
- 74. Note 1: For the sRGB colorspace, the relative luminance of a color is defined as L = 0.2126 * R + 0.7152 * G + 0.0722 * B where R, G and B are defined as: if RsRGB <= 0.03928 then R = RsRGB/12.92 else R = ((RsRGB+0.055)/1.055) ^ 2.4 if GsRGB <= 0.03928 then G = GsRGB/12.92 else G = ((GsRGB+0.055)/1.055) ^ 2.4 if BsRGB <= 0.03928 then B = BsRGB/12.92 else B = ((BsRGB+0.055)/1.055) ^ 2.4 WCAG definition of relative luminance
- 75. Excuse me?
- 76. Luminance
- 78. 0
- 79. 1
- 80. Note 1: For the sRGB color space, the relative luminance of a color is defined as L = 0.2126 * R + 0.7152 * G + 0.0722 * B where R, G and B are defined as: WCAG definition of relative luminance
- 81. standardized by the International Electrotechnical Commission sRGB
- 82. sRGB
- 84. Works in a similar way Default color space Visual SystemWeb Browsers
- 85. Chromaticity | Chromaticity | Red | Green | Blue | White point | |--------------|---------|-----------|----------|--------------| | x | 0.6400 | 0.3000 | 0.1500 | 0.3127 | | y | 0.3300 | 0.6000 | 0.0600 | 0.3290 | | Y | 0.2126 | 0.7152 | 0.0722 | 1.0000 |
- 86. export enum YValues { r = 0.2126, g = 0.7152, b = 0.0722, } xyY color space Step 1 Y values represent the luminance of a color entry
- 87. export function calculateRGBEntry( entry: number, y: Type.YValues): number { const average = entry / 255; return average <= 0.03928 ? average / 12.92 * y : ((average + 0.055) / 1.055 ) ** 2.4 * y; }; Color contrast Step 2
- 88. Color contrast Step 2 export function luminance( sRGB: Type.RGB ): number { return calculateRGBEntry(sRGB[0], Type.YValues.r) + calculateRGBEntry(sRGB[1], Type.YValues.g) + calculateRGBEntry(sRGB[2], Type.YValues.b); }
- 89. Color contrast Step 2 export function contrastRatio( sRGB: Type.RGB, sRGB2: Type.RGB): number { const light = Math.max(luminance(sRGB), luminance(sRGB2)); const dark = Math.min(luminance(sRGB), luminance(sRGB2)); return +((light + 0.05) / (dark + 0.05)).toFixed(2); }
- 90. N colors Aa Aa Aa Aa [ ]
- 91. A11y everywhere
- 93. SortStep 3 export function quickSort( arr: Type.Color[], cb: (sRGB: Type.RGB) => number, lo: number, hi: number ): void { if (lo < hi) { const pivot = cb(arr[Math.floor((lo + hi) / 2)].rgb); const p = partition(arr, lo, hi, pivot, cb); quickSort(arr, cb, lo, p.hi); quickSort(arr, cb, p.lo, hi); } } export function sort( arr: Type.Color[], cb: (sRGB: Type.RGB) => number) { return quickSort(arr, cb, 0, arr.length - 1); }
- 94. SortStep 3 export function quickSort( arr: Type.Color[], cb: (sRGB: Type.RGB) => number, lo: number, hi: number ): void { if (lo < hi) { const pivot = cb(arr[Math.floor((lo + hi) / 2)].rgb); const p = partition(arr, lo, hi, pivot, cb); quickSort(arr, cb, lo, p.hi); quickSort(arr, cb, p.lo, hi); } } export function sort( arr: Type.Color[], cb: (sRGB: Type.RGB) => number) { return quickSort(arr, cb, 0, arr.length - 1); }
- 95. SortStep 3 export function quickSort( arr: Type.Color[], cb: (sRGB: Type.RGB) => number, lo: number, hi: number ): void { if (lo < hi) { const pivot = cb(arr[Math.floor((lo + hi) / 2)].rgb); const p = partition(arr, lo, hi, pivot, cb); quickSort(arr, cb, lo, p.hi); quickSort(arr, cb, p.lo, hi); } } export function sort( arr: Type.Color[], cb: (sRGB: Type.RGB) => number) { return quickSort(arr, cb, 0, arr.length - 1); }
- 96. SortStep 3 export function partition( arr: Type.Color[], lo: number, hi: number, pivot: number, cb: (sRGB: Type.RGB) => number): { lo: number, hi: number} { if (lo <= hi) { if (cb(arr[lo].rgb) < pivot) { return partition(arr, lo + 1, hi, pivot, cb); } if (cb(arr[hi].rgb) > pivot) { return partition(arr, lo, hi - 1, pivot, cb); } if (lo <= hi) { swap(arr, lo, hi); return partition(arr, lo + 1, hi - 1, pivot, cb); } } return { lo, hi }; }
- 97. SortStep 3 export function quickSort( arr: Type.Color[], cb: (sRGB: Type.RGB) => number, lo: number, hi: number ): void { if (lo < hi) { const pivot = cb(arr[Math.floor((lo + hi) / 2)].rgb); const p = partition(arr, lo, hi, pivot, cb); quickSort(arr, cb, lo, p.hi); quickSort(arr, cb, p.lo, hi); } } export function sort( arr: Type.Color[], cb: (sRGB: Type.RGB) => number) { return quickSort(arr, cb, 0, arr.length - 1); }
- 99. Aa Aa AaAaAa Sorted by luminance Step 3
- 100. Binary Search efficient algorithm that searches a sorted list
- 101. Aa Aa AaAaAa Binary Search Step 4 AAA color contrast check Match!
- 102. SearchStep 4 function lowerSearch<T extends QuickSearch>( arr: Array<T>, el: T, val: number, lo: number, hi: number): number | [] { const mid = Math.floor((lo + hi) / 2); const prev = mid - 1; const next = mid + 1; const midRatio = contrastRatio(arr[mid].rgb, el.rgb); if (lo < hi) { if (midRatio > val && prev >= 0) { if (contrastRatio(arr[prev].rgb, el.rgb) < val) { return mid; } return lowerSearch(arr, el, val, lo, mid); } if (midRatio < val && next < arr.length) { if (contrastRatio(arr[next].rgb, el.rgb) > val) { return next; } return lowerSearch(arr, el, val, mid, hi) } if (mid === val) { return mid; } } return []; }; export function search( arr: Type.Color[], el: Type.Color, val: Type.A11yRatio, type?: Type.Search): number | [] { if (type === Type.Search.upper) { return upperSearch(arr, el, val, 0, arr.length); } return lowerSearch(arr, el, val, 0, arr.length); };
- 103. SearchStep 4 function lowerSearch<T extends QuickSearch>( arr: Array<T>, el: T, val: number, lo: number, hi: number): number | [] { const mid = Math.floor((lo + hi) / 2); const prev = mid - 1; const next = mid + 1; const midRatio = contrastRatio(arr[mid].rgb, el.rgb); if (lo < hi) { if (midRatio > val && prev >= 0) { if (contrastRatio(arr[prev].rgb, el.rgb) < val) { return mid; } return lowerSearch(arr, el, val, lo, mid); } if (midRatio < val && next < arr.length) { if (contrastRatio(arr[next].rgb, el.rgb) > val) { return next; } return lowerSearch(arr, el, val, mid, hi) } if (mid === val) { return mid; } } return []; }; export function search( arr: Type.Color[], el: Type.Color, val: Type.A11yRatio, type?: Type.Search): number | [] { if (type === Type.Search.upper) { return upperSearch(arr, el, val, 0, arr.length); } return lowerSearch(arr, el, val, 0, arr.length); };
- 104. SearchStep 4 function lowerSearch<T extends QuickSearch>( arr: Array<T>, el: T, val: number, lo: number, hi: number): number | [] { const mid = Math.floor((lo + hi) / 2); const prev = mid - 1; const next = mid + 1; const midRatio = contrastRatio(arr[mid].rgb, el.rgb); if (lo < hi) { if (midRatio > val && prev >= 0) { if (contrastRatio(arr[prev].rgb, el.rgb) < val) { return mid; } return lowerSearch(arr, el, val, lo, mid); } if (midRatio < val && next < arr.length) { if (contrastRatio(arr[next].rgb, el.rgb) > val) { return next; } return lowerSearch(arr, el, val, mid, hi) } if (mid === val) { return mid; } } return []; }; export function search( arr: Type.Color[], el: Type.Color, val: Type.A11yRatio, type?: Type.Search): number | [] { if (type === Type.Search.upper) { return upperSearch(arr, el, val, 0, arr.length); } return lowerSearch(arr, el, val, 0, arr.length); };
- 105. Enhanced Color
- 106. Enhanced colors Step 5 export function createEnhanced( rawColor: Type.Color, aaa: Type.Color[] | [], aa: Type.Color[] | [] ): Type.colorEnhanced { const rgb = rawColor.rgb; return { name: rawColor.name, rgb, aaa, aa, toRGB(): string { return toRGBString(rgb); }, toHEX(): string { return tinyColor(toRGBString(rgb)).toHexString(); }, toHSL(): string { return tinyColor(toRGBString(rgb)).toHslString(); }, toRGBA(alpha: number): string { const color = tinyColor(toRGBString(rgb)); color.setAlpha(alpha); return color.toRgbString() } } }
- 107. Enhanced colors Step 5 export function createEnhanced( rawColor: Type.Color, aaa: Type.Color[] | [], aa: Type.Color[] | [] ): Type.colorEnhanced { const rgb = rawColor.rgb; return { name: rawColor.name, rgb, aaa, aa, toRGB(): string { return toRGBString(rgb); }, toHEX(): string { return tinyColor(toRGBString(rgb)).toHexString(); }, toHSL(): string { return tinyColor(toRGBString(rgb)).toHslString(); }, toRGBA(alpha: number): string { const color = tinyColor(toRGBString(rgb)); color.setAlpha(alpha); return color.toRgbString() } } }
- 108. Colors Under Control
- 109. Demo
- 110. It’s open github.com/palmaswell/forward Use it, play with it, make it better!
- 111. Benefits New opportunities Offer utility and elegance Profitable Legal compliance
- 112. Before: 10% (imaginary number) Middle: x100% After: x1000% A11y costs factors
- 113. Questions?