<div class="nfaf-generated-content"><div class="nfaf-visual-card" style="--nfaf-accent:#82bf98"><div class="nfaf-visual-icon" aria-hidden="true"><svg viewBox="0 0 64 64" role="img"><circle cx="32" cy="32" r="28" fill="currentColor" opacity=".12"></circle><path d="M20 34l8 8 17-19" fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"></path></svg></div><div><strong>WCAG Color Contrast Checker</strong><span>Browser-first utility with visible inputs, outputs, and limitations.</span></div></div><p class="nfaf-lede">This checker calculates the relative luminance contrast ratio for two sRGB colors and compares the result with common WCAG thresholds.</p><p><strong>Designed for:</strong> Designers, frontend developers, and editors reviewing readable interface color pairs.</p><h2>How to use this tool</h2><p>Enter the text color and background color as six-digit HEX values. The preview swatch updates with the pair, and the result shows the ratio plus normal-text and large-text guidance.</p><h2>How the result is produced</h2><p>The browser converts sRGB channel values to linear-light values, calculates relative luminance, and divides the lighter luminance plus 0.05 by the darker luminance plus 0.05. It does not replace a full accessibility review.</p><h2>Test examples</h2><p>#000000 on #ffffff produces a high contrast ratio. A pair can pass large-text guidance while failing normal-text guidance, so check the actual font size and weight used by the design.</p><h2>Limitations</h2><p>The result covers contrast between two colors; it does not evaluate focus indicators, text size, font weight, semantics, motion, color blindness, or the contrast of images and gradients.</p><h2>Privacy and processing</h2><p>Color values are processed in the browser and are not uploaded.</p><h2>Related guide</h2><p><a href="https://nofyi.com/color-contrast-is-one-part-of-accessibility/">Color contrast is one part of accessible design</a></p><h2>Related tools in this category</h2><ul class="nfaf-related-tools"><li><a href="https://nofyi.com/tools/hex-rgb-color-converter/">HEX and RGB Color Converter</a><span>Enter a HEX color such as #336699 and get its red, green, and blue channels.</span></li></ul><h2>Documentation</h2><ul><li><a href="https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html" rel="nofollow noopener" target="_blank">https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html</a></li><li><a href="https://www.w3.org/TR/WCAG21/" rel="nofollow noopener" target="_blank">https://www.w3.org/TR/WCAG21/</a></li></ul><p class="nfaf-disclosure">This page describes the implementation shipped with the NOFYI Tool Factory. Review the interface output before using it in a production workflow.</p></div><div class="nfaf-app-slot">[nfaf_tool_app]</div>
