if (isset($_GET['api']) && isset($_GET['fcolor']) && isset($_GET['bcolor'])) { header('Access-Control-Allow-Origin: *'); header('Content-Type: application/json'); $fcolor = strtoupper(htmlentities(substr(trim($_GET['fcolor']), 0, 8))); $bcolor = strtoupper(htmlentities(substr(trim($_GET['bcolor']), 0, 6))); $result = evaluateColorContrast($fcolor, $bcolor); $result_json = json_encode($result); echo($result_json); die(); } else { $fcolor = "0000FF"; $bcolor = "FFFFFF"; } function calculateLightness($color) { $r = hexdec(substr($color, 0, 2)) / 255; // red value $g = hexdec(substr($color, 2, 2)) / 255; // green value $b = hexdec(substr($color, 4, 2)) / 255; // blue value if ($r <= 0.03928) { $r = $r / 12.92; } else { $r = pow((($r + 0.055) / 1.055), 2.4); } if ($g <= 0.03928) { $g = $g / 12.92; } else { $g = pow((($g + 0.055) / 1.055), 2.4); } if ($b <= 0.03928) { $b = $b / 12.92; } else { $b = pow((($b + 0.055) / 1.055), 2.4); } $lightness = 0.2126 * $r + 0.7152 * $g + 0.0722 * $b; return $lightness; } // calculates the lightness ratio of two colors // the lightness ratio equations are from the WCAG 2 requirements // http://www.w3.org/TR/WCAG20/#contrast-ratiodef function calculateLightnessRatio($color1, $color2) { $l1 = calculateLightness($color1); $l2 = calculateLightness($color2); if ($l1 > $l2) { $ratio = (($l1 + 0.05) / ($l2 + 0.05)); } else { $ratio = (($l2 + 0.05) / ($l1 + 0.05)); } return $ratio; } function RGBAtoRGB($color1, $color2) { $fa = array( 'r' => hexdec(substr($color1, 0, 2)), 'g' => hexdec(substr($color1, 2, 2)), 'b' => hexdec(substr($color1, 4, 2)), 'a' => hexdec(substr($color1, 6, 2)) / 255 ); $ba = array( 'r' => hexdec(substr($color2, 0, 2)), 'g' => hexdec(substr($color2, 2, 2)), 'b' => hexdec(substr($color2, 4, 2)) ); $a = $fa['a']; if (strlen($color1) < 8) { $a = 1; } $modR = round((1 - $a) * $ba['r'] + $a * $fa['r'], PHP_ROUND_HALF_DOWN); $modG = round((1 - $a) * $ba['g'] + $a * $fa['g'], PHP_ROUND_HALF_DOWN); $modB = round((1 - $a) * $ba['b'] + $a * $fa['b'], PHP_ROUND_HALF_DOWN); $modColor = substr('0' . dechex($modR), -2) . substr('0' . dechex($modG), -2) . substr('0' . dechex($modB), -2); return $modColor; } // returns an array with the results of the contrast analysis // it returns akey for each level (AA and AAA, both for normal and large or bold text) // it also returns the calculated contrast ratio // the ratio levels are from the WCAG 2 requirements // http://www.w3.org/TR/WCAG20/#visual-audio-contrast (1.4.3) // http://www.w3.org/TR/WCAG20/#larger-scaledef function evaluateColorContrast($color1, $color2) { $color1 = RGBAtoRGB($color1, $color2); $ratio = calculateLightnessRatio($color1, $color2); $colorEvaluation["ratio"] = substr($ratio, 0, 4); $colorEvaluation["AA"] = ($ratio >= 4.5 ? 'pass' : 'fail'); $colorEvaluation["AALarge"] = ($ratio >= 3 ? 'pass' : 'fail'); $colorEvaluation["AAA"] = ($ratio >= 7 ? 'pass' : 'fail'); $colorEvaluation["AAALarge"] = ($ratio >= 4.5 ? 'pass' : 'fail'); return $colorEvaluation; } $page['title'] = 'Contrast Checker'; $page['head_style'] = ''; $page['head_other'] = ''; $page['tab'] = 'resources'; // services, articles, resources, community, or '' $page['breadcrumbs'] = 'Resources > Contrast Checker'; $page['related'] = array( '/articles/contrast/' => 'Contrast and Color Accessibility', '/resources/evalquickref/' => 'Quick Reference: Testing Web Content for Accessibility', "/services/evaluation" => "WebAIM Auditing & Evaluation Services", '/resources/designers/' => 'Web Accessibility for Designers', '/resources/linkcontrastchecker/' => 'Link Contrast Checker', 'bookmarklet' => 'Contrast Checker Bookmarklet' ); include 'head.php'; ?>
WCAG AA:
WCAG AAA:
WCAG AA:
WCAG AAA:
WCAG AA:
Web accessibility testing can be difficult! The experts at WebAIM can audit your web site and provide a detailed report to help you remediate accessibility and WCAG compliance issues.
Enter a foreground and background color in RGB hexadecimal format or choose a color using the Color Picker. Enter an Alpha value to adjust the transparency of the foreground color. Use the Lightness slider to adjust the perceived lightness of the color.
WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders). WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.
Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.
Hint: Use the eye dropper tool in the Color Picker to extract the color value from any element on screen. Additionally, WAVE can analyze contrast ratios for all page text elements at once.
Use our link contrast checker to evaluate links that are identified using color alone.
This tool also functions as a basic API. Simply append &api
to any permalink to get a JSON object with the contrast ratio and the AA/AAA pass/fail states. For example: https://webaim.org/resources/contrastchecker/?fcolor=0000FF&bcolor=EEEEEE&api.
A miniature version of this Contrast Checker can be initiated within any web page by installing and using the Contrast Checker Bookmarklet. This tool allows easy contrast testing of any content on your screen by using the foreground and background eyedropper tools.