WCAG contrast checker in SVG filter

Developer
Taylor Hunt
Size
3,534 Kb
Views
20,240
  1. WCAG contrast checker in SVG filter Previews
  2. WCAG contrast checker in SVG filter HTML Codes
  3. WCAG contrast checker in SVG filter CSS Codes

How do I make an wcag contrast checker in svg filter?

What is a wcag contrast checker in svg filter? How do you make a wcag contrast checker in svg filter? This script and codes were developed by Taylor Hunt on 29 September 2022, Thursday.

WCAG contrast checker in SVG filter Previews
IQ Test

WCAG contrast checker in SVG filter - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>WCAG contrast checker in SVG filter</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<style> body { padding: 1em }
</style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Using an SVG <code>&lt;filter></code> to check for contrast accessibility</h1>
<p>Ideally this will work like <a href="https://chrome.google.com/webstore/detail/color-contrast-analyzer/dagdlcijhfbmgkjokkjicnnfimlebcll">the Color Contrast Analyzer Chrome extension</a>, but faster, able to be used dynamically, and cross-browser.</p>
<svg height="0" width="0"> <filter id="wcag-aa-body-text" color-interpolation-filters="linearRGB" x="0" y="0" width="100%" height="100%"> <!-- set filter area to exactly the filtered element's dimensions --> <!-- STEP 1: Convert each pixel based on its luminance This feColorMatrix shorthand converts each pixel to rgba(0,0,0, X), where X is the pixel's luminance. This should match the official WCAG algorithm: https://www.w3.org/TR/WCAG20/relative-luminance.xml The first operation in the WCAG algorithm when each color component is ≤0.03928 appears to be the conversion from sRGB to linear RGB, so as long as we specify `color-interpolation-filters="linearRGB"` like above, this should be equivalent. --> <feColorMatrix in="SourceGraphic" type="luminanceToAlpha" result="LUMINANCE"/> <!-- Possible tweak: slight blur to iron out irregularities --> <!-- STEP 2: Find high-contrast edges between pixel luminances This particular convolution matrix kernel is known as an "Edge Detect", which you may have used in a graphics editor. It displays lines more vividly when the difference between two adjacent pixels is high. It would be nice to know if it can be tweaked to exaggerate/soften its output. Other possible matrices: kernelMatrix=" 1 -2 1 -2 4 -2 1 -2 1" --> <feConvolveMatrix in="LUMINANCE" kernelMatrix="1 1 1 1 -8 1 1 1 1" result="EDGES"/> <!-- STEP 3: Hide all edges too faint to meet contrast requirements This filter operation should "round" each pixel to either full opacity or full transparency, depending on which one it's closer to. Edges too faint to match the WCAG requirements should disappear. --> <feComponentTransfer in="EDGES" result="VALID_EDGES"> <feFuncA type="discrete" tableValues="0 1"/> <!-- Locks opacity to either 0 or 1 --> </feComponentTransfer> <!-- Invert the black pixels to be white instead --> <feColorMatrix in="VALID_EDGES" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0" result="INVERTED_VALID_EDGES"/> <!-- Generate a very dark overlay color --> <feFlood flood-color="rgba(0, 0, 0, 0.92)" result="PARTIALLY_TRANSPARENT_BLACK"/> <!-- Mix that color with the original image, producing a dimmed version --> <feBlend in="PARTIALLY_TRANSPARENT_BLACK" in2="SourceGraphic" result="DIMMED_ORIGINAL_ELEMENT"/> <!-- Overlay the edges on top of the dimmed element --> <feMerge> <feMergeNode in="DIMMED_ORIGINAL_ELEMENT"/> <feMergeNode in="INVERTED_VALID_EDGES"/> </feMerge> </filter>
</svg>
<h2>Test strings (WCAG AA for body text, must be ≥4.5:1)</h2>
<p><strong>NOTE:</strong> This filter currently is not calibrated correctly. Do not use it to check accessibility yet!</p>
<p>If you know how to help, please let me know.</p>
<p>More thorough color combinations are available at <a href="http://juicystudio.com/services/coloursaferatio.php">juicystudio.com/services/coloursaferatio.php</a>, but I'm respecting bandwidth by not autoloading their site.</p>
<dl class="test" style="background:#fff;color:#000"> <dt style="color:#000">#000</dt> <dd>21:1, PASS – maximum contrast</dd> <dt style="color:#00f">#00f</dt> <dd>8.59:1, PASS</dd> <dt style="color:#777676">#777676</dt> <dd>4.53:1, PASS</dd> <dt style="color:#777">#777</dt> <dd>4.48:1, FAIL</dd> <dt style="color:#f00">#f00</dt> <dd>4:1, FAIL</dd> <dt style="color:#0f0">#0f0</dt> <dd>1.37:1, FAIL</dd> <dt style="color:#ff0">#ff0</dt> <dd>1.07:1, FAIL</dd> <dt style="color:#fff">#fff</dt> <dd>1:1, FAIL – minimum contrast</dd>
</dl>
<dl class="test" style="background:#000;color:#fff"> <dt style="color:#fff">#fff</dt> <dd>21:1, PASS – maximum contrast</dd> <dt style="color:#ff0">#ff0</dt> <dd>19.56:1, PASS</dd> <dt style="color:#0f0">#0f0</dt> <dd>15.3:1, PASS</dd> <dt style="color:#f00">#f00</dt> <dd>5.25:1, PASS</dd> <dt style="color:#777">#777</dt> <dd>4.69:1, PASS</dd> <dt style="color:#777676">#777676</dt> <dd>4.64:1, PASS</dd> <dt style="color:#00f">#00f</dt> <dd>2.44:1, FAIL</dd> <dt style="color:#000">#000</dt> <dd>1:1, FAIL – minimum contrast</dd>
</dl>
<h2>Filtered <code>&lt;iframe></code> – scroll &amp; interact!</h2>
<iframe class="test" src="https://css-tricks.com/" width="320" height="500"></iframe>
</body>
</html>

WCAG contrast checker in SVG filter - Script Codes CSS Codes

.test { -webkit-filter: url(#wcag-aa-body-text); filter: url(#wcag-aa-body-text) }
dl { display: inline-block;
}
dt { font: bold 1.5em/1.5 monospace, monospace;
}
WCAG contrast checker in SVG filter - Script Codes
WCAG contrast checker in SVG filter - Script Codes
Home Page Home
Developer Taylor Hunt
Username tigt
Uploaded September 29, 2022
Rating 3
Size 3,534 Kb
Views 20,240
Do you need developer help for WCAG contrast checker in SVG filter?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Taylor Hunt (tigt) Script Codes
Name
SVG Coloring Book
Weird Animals
Scaling inline SVG with object-fit
Halftone button
Web site header, circa 2016
Deuteragonist Image
Natural dimensions auto-sizing
Filtered background with fallback for legibility
Scaling inline SVG with preserveAspectRatio
Hiding inline SVG from older browsers with CSS namespaces
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!