{"id":40396,"date":"2025-02-14T08:47:30","date_gmt":"2025-02-14T08:47:30","guid":{"rendered":"https:\/\/reciteme.com\/us\/?p=40396"},"modified":"2025-04-28T11:28:06","modified_gmt":"2025-04-28T10:28:06","slug":"color-contrast-checker","status":"publish","type":"post","link":"https:\/\/reciteme.com\/us\/product\/color-contrast-checker\/","title":{"rendered":"Color Contrast Checker"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"40396\" class=\"elementor elementor-40396\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-78614c4 e-flex e-con-boxed e-con e-parent\" data-id=\"78614c4\" data-element_type=\"container\" id=\"colour-contrast-checker\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-c77fa38 e-flex e-con-boxed e-con e-child\" data-id=\"c77fa38\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-838f867 e-flex e-con-boxed e-con e-child\" data-id=\"838f867\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c1c7190 elementor-widget elementor-widget-heading\" data-id=\"c1c7190\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<span class=\"elementor-heading-title elementor-size-default\">Design Tools<\/span>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5ecaac3 disable-default cc-title-header elementor-widget elementor-widget-heading\" data-id=\"5ecaac3\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Color Contrast Checker<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-33bfcb5 elementor-widget-divider--view-line elementor-invisible elementor-widget elementor-widget-divider\" data-id=\"33bfcb5\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInLeft&quot;}\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2588fe9 elementor-widget elementor-widget-text-editor\" data-id=\"2588fe9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This Color Contrast Checker is a user-friendly tool designed to help you evaluate the contrast between foreground and background colors on your webpage. It ensures your design complies with the Web Content Accessibility Guidelines (WCAG) for readability and accessibility.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-801a892 elementor-widget elementor-widget-button\" data-id=\"801a892\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"\/us\/demo\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Book a Demo<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-537839e e-flex e-con-boxed e-con e-child\" data-id=\"537839e\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dfb0ac1 elementor-widget elementor-widget-ucaddon_contrast_checker_2_of_3\" data-id=\"dfb0ac1\" data-element_type=\"widget\" data-widget_type=\"ucaddon_contrast_checker_2_of_3.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n<!-- start Contrast Checker 1 of 2 -->\n\n<div class=\"cc-wrap\">\n      <div style=\"display: flex;justify-content: space-between;\">\n        <div class=\"cc-column-1\">\n            <h3 style=\"font-size:24px;font-weight:bold;\">Results<\/h3>\n        <\/div>\n        <div class=\"cc-column-2\">\n            <h3 style=\"font-size:24px; text-align:center;font-weight:bold;\">AA<\/h3>\n        <\/div>\n        <div class=\"cc-column-3\">\n            <h3 style=\"font-size:24px; text-align:center;font-weight:bold;\">AAA<\/h3>\n        <\/div>\n    <\/div>\n    <div style=\"display: flex;justify-content: space-between;margin-top:5px\">\n        <div class=\"cc-column-1\" style=\"display: flex;justify-content: start;\">\n            <h3 style=\"font-weight:300\">\n                Aa\n            <\/h3>\n            <p style=\"padding-top: 3px !important;\">\n                Normal Text\n            <\/p>\n        <\/div>\n        <div class=\"cc-column-2\">\n            <span id=\"normal-aa-status\" class=\"status\">FAIL<\/span>\n        <\/div>\n        <div class=\"cc-column-3\">\n            <span id=\"normal-aaa-status\" class=\"status\">FAIL<\/span>\n        <\/div>\n    <\/div>\n    <div style=\"display: flex;justify-content: space-between;\">\n        <div class=\"cc-column-1\" style=\"display: flex;justify-content: start;\">\n            <h3>\n                Aa\n            <\/h3>\n            <p style=\"padding-top: 3px !important;\">\n                Large Text\n            <\/p>\n        <\/div>\n        <div class=\"cc-column-2\">\n            <span id=\"large-aa-status\" class=\"status\">FAIL<\/span>\n        <\/div>\n        <div class=\"cc-column-3\">\n            <span id=\"large-aaa-status\" class=\"status\">FAIL<\/span>\n        <\/div>\n    <\/div>\n    <div style=\"display: flex;justify-content: space-between;\">\n        <div class=\"cc-column-1\" style=\"display: flex;justify-content: start;\">\n            <svg style=\"margin-right:10px;margin-top:8px;\" width=\"27\" height=\"7\" viewBox=\"0 0 27 7\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                <rect width=\"18\" height=\"7\" rx=\"3.5\" fill=\"#06334A\"\/>\n                <rect x=\"20\" width=\"7\" height=\"7\" rx=\"3.5\" fill=\"#06334A\"\/>\n                <\/svg>                \n            <p>\n                Design Elements\n            <\/p>\n        <\/div>\n        <div class=\"cc-column-2\">\n            <span id=\"design-status\" class=\"status\">FAIL<\/span>\n        <\/div>\n        <div class=\"cc-column-3\">\n            \n        <\/div>\n    <\/div>\n\n<\/div>\n<!-- end Contrast Checker 1 of 2 -->\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8271c61 e-con-full e-flex e-con e-child\" data-id=\"8271c61\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a0f76df elementor-widget-tablet__width-initial elementor-widget__width-inherit elementor-widget elementor-widget-ucaddon_contrast_checker\" data-id=\"a0f76df\" data-element_type=\"widget\" data-widget_type=\"ucaddon_contrast_checker.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n<!-- start Contrast Checker 2 of 2 -->\n<style>\/* widget: Contrast Checker 2 of 2 *\/\n\n\/* Layout *\/\n.acc-cc-wrap {\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n    margin-bottom: 40px;\n}\n.elementor-widget-ucaddon_contrast_checker {\n    width:100%!important;\n}\n.cc-wrap {\n    background:white;\n    border-radius:25px;\nbox-shadow: 0px 12px 44px -17px #AEC0CA;\npadding:25px 60px;\n}\n\n.cc-wrap p, .cc-wrap label {\n    margin-bottom:0px!important;\n    font-weight:bold;\n}\n\n.cc-wrap h3, .cc-wrap h2 {\n    font-size:20px;\n}\n\n.cc-wrap h3 {\n    margin-bottom:0px;\n}\n\n.color-info {\n    padding-left:20px;\n}\n\n.cc-column-1 {\n    width:30%;\n}\n\n.cc-column-1 h3 {\n    margin-right:10px;\n}\n\n.cc-column-2 {\n    width:30%;\n}\n\n\n.cc-column-3 {\n    width:30%;\n}\n\n@media only screen and (max-width:1100px) {\n.cc-two-col {\n    display: block;\n    width:100%!important;\n    padding:0px!important;\n}\n\n.cc-wrap {\n    display: block!important;\n    width:100%;\n}\n    \n}\n\n\n\/* Color Selectors *\/\n.color-selector {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    position: relative; \/* Parent positioned relative for color input alignment *\/\n  margin-top:4px;\n}\n#foreground-circle {\n    background-color:#000000;\n}\n.color-circle {\n    width:38px;\n    height:38px;\n    border-radius: 10%;\n    border: 2px solid #ccc;\n    cursor: pointer;\n    background-color: #f0f0f0;\n    transition: transform 0.2s, box-shadow 0.2s;\n}\n\n.color-circle:hover {\n    transform: scale(1.1);\n    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);\n}\n\n.color-input {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 50px;\n    height: 50px;\n    opacity: 0;\n    cursor: pointer;\n    z-index: 10; \/* Ensure the input is above other elements *\/\n}\n\n.color-hex-input {\n    margin-bottom:15px;\n    border:none!important;\n    background:#ECEBEB;\n    font-size:20px;\n    padding:6px 10px;\n}\n\n\/* Adjust Buttons *\/\n.adjust-button {\n    background: #0e59aa;\n    color: white;\n    border: none;\n    border-radius: 5px;\n    padding: 0px;\n    width:50px;\n    height:30px;\n    font-size: 1rem;\n    cursor: pointer;\n}\n\n.adjust-button:disabled {\n    background-color: #cccccc;\n    cursor: not-allowed;\n}\n\n.adjust-button:hover:enabled {\n    background-color: #0d3e73;\n}\n.reverse-colours {\n    cursor:pointer;\n    transition: all 0.3s ease;\n}\n.reverse-colours:hover {\n    transform:scale(1.1);\n}\n\n#adjust-aa {\n    margin-right:10px;\n}\n\/* Results Section *\/\n.results {\n    display: flex;\n    justify-content: space-between;\n    gap: 20px;\n}\n\n.status {\n    padding: 5px;\n  width:100px;\n    border-radius: 5px;\n    font-weight: bold;\n    font-size: 1rem;\n    text-align: center;\n  display:block;\n  margin:0 auto;\n}\n\n.pass {\n    background-color: #246534;\n    color: white;\n}\n\n.fail {\n    background-color: #a92330;\n    color: white;\n}\n\n#contrast-ratio {\nfont-weight:600;\n} \n\n\/* Live Example *\/\n#example-section {\n    background: #f9f9f9;\n    border: 1px solid #ccc;\n    padding: 20px;\n    text-align: left;\n}\n\n#example-section h2 {\n    font-size: 1.5rem;\n    color: #333;\n    margin-bottom:0px!important;\n}\n\n#example-section p {\n    font-size: 1rem;\n    color: #666;\n    margin: 10px 0;\n}\n\n#example-section input {\n    width: 100%;\n    padding: 10px;\n    border: 1px solid #ccc;\n    border-radius: 5px;\n    margin: 10px 0;\n}\n\n#example-section a {\n    display: inline-block;\n    background: #007bff;\n    color: white;\n    padding: 10px 20px;\n    text-decoration: none;\n    border-radius: 5px;\n    margin-top: 10px;\n}\n\n#example-section a:hover {\n    background: #0056b3;\n}\n\n.color-hex-input {\n  margin-bottom: 0px!important;\n}\n\n.copy-colour-link {\n  padding-bottom: 15px!important;\n  display: block!important;\n  margin-top:5px;\n  cursor: pointer;\n  font-size:13px;\n  text-decoration: underline;\n}\n\n<\/style>\n\n<div class=\"cc-wrap\" style=\"display: flex;justify-content:space-between;align-items: center;\">\n\n    <div style=\"width:100%;padding-right:50px;\" class=\"cc-two-col\">\n        <div style=\"display:flex;justify-content:start;align-items:center;\">\n            <h2 style=\"font-size:24px;font-weight:bold;\">\n                Your Colors\n            <\/h2>\n        <\/div>\n        <div style=\"display:flex;width:100%;justify-content:space-between;margin-top:0px;flex-wrap:wrap\">\n            <!-- Left Section -->\n            <div style=\"display:flex; align-items:start\">\n                <div class=\"color-selector\">\n                    <div id=\"foreground-circle\" class=\"color-circle\"><\/div>\n                    <input type=\"color\" id=\"foreground-color\" class=\"color-input\" value=\"#000000\">\n                <\/div>\n                <div class=\"color-info\">\n                   \t<label for=\"foreground-color\">Color One<\/label>\n                    <div\n                        style=\"display: flex;justify-content: space-between;align-items: center;padding:3px 10px;max-width:180px;width:100%;background:#F0F9FF;border-radius:8px;border:1px solid #06334A;\">\n                        <input aria-label=\"Input for Colour One (Foreground Colour)\" type=\"text\" id=\"foreground-color-hex\" class=\"color-hex-input\" value=\"#000000\"\n                            style=\"background:#F0F9FF;border:0px\">\n                        <svg width=\"25\" height=\"25\" class=\"copy-colour-1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n                            xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" version=\"1.1\" id=\"Layer_1\" x=\"0px\" y=\"0px\"\n                            viewBox=\"0 0 115.77 122.88\" xml:space=\"preserve\">\n                            <style type=\"text\/css\">\n                                .st0 {\n                                    fill-rule: evenodd;\n                                    clip-rule: evenodd;\n                                }\n                            <\/style>\n                            <g>\n                                <path class=\"st0\" d=\"M89.62,13.96v7.73h12.19h0.01v0.02c3.85,0.01,7.34,1.57,9.86,4.1c2.5,2.51,4.06,5.98,4.07,9.82h0.02v0.02\n      v73.27v0.01h-0.02c-0.01,3.84-1.57,7.33-4.1,9.86c-2.51,2.5-5.98,4.06-9.82,4.07v0.02h-0.02h-61.7H40.1v-0.02\n      c-3.84-0.01-7.34-1.57-9.86-4.1c-2.5-2.51-4.06-5.98-4.07-9.82h-0.02v-0.02V92.51H13.96h-0.01v-0.02c-3.84-0.01-7.34-1.57-9.86-4.1\n      c-2.5-2.51-4.06-5.98-4.07-9.82H0v-0.02V13.96v-0.01h0.02c0.01-3.85,1.58-7.34,4.1-9.86c2.51-2.5,5.98-4.06,9.82-4.07V0h0.02h61.7\n      h0.01v0.02c3.85,0.01,7.34,1.57,9.86,4.1c2.5,2.51,4.06,5.98,4.07,9.82h0.02V13.96L89.62,13.96z M79.04,21.69v-7.73v-0.02h0.02\n      c0-0.91-0.39-1.75-1.01-2.37c-0.61-0.61-1.46-1-2.37-1v0.02h-0.01h-61.7h-0.02v-0.02c-0.91,0-1.75,0.39-2.37,1.01\n      c-0.61,0.61-1,1.46-1,2.37h0.02v0.01v64.59v0.02h-0.02c0,0.91,0.39,1.75,1.01,2.37c0.61,0.61,1.46,1,2.37,1v-0.02h0.01h12.19V35.65\n      v-0.01h0.02c0.01-3.85,1.58-7.34,4.1-9.86c2.51-2.5,5.98-4.06,9.82-4.07v-0.02h0.02H79.04L79.04,21.69z M105.18,108.92V35.65v-0.02\n      h0.02c0-0.91-0.39-1.75-1.01-2.37c-0.61-0.61-1.46-1-2.37-1v0.02h-0.01h-61.7h-0.02v-0.02c-0.91,0-1.75,0.39-2.37,1.01\n      c-0.61,0.61-1,1.46-1,2.37h0.02v0.01v73.27v0.02h-0.02c0,0.91,0.39,1.75,1.01,2.37c0.61,0.61,1.46,1,2.37,1v-0.02h0.01h61.7h0.02\n      v0.02c0.91,0,1.75-0.39,2.37-1.01c0.61-0.61,1-1.46,1-2.37h-0.02V108.92L105.18,108.92z\" \/>\n                            <\/g>\n                        <\/svg>\n\n                    <\/div>\n\n                    <div style=\"display:flex;justify-content:start;margin-top:25px\">\n                        <div style=\"padding-right:20px;\">\n                            <p>Find nearest:<\/p>\n                            <div style=\"display:flex\">\n                                <button id=\"adjust-aa\" class=\"adjust-button\" disabled>AA<\/button>\n                                <button id=\"adjust-aaa\" class=\"adjust-button\" disabled>AAA<\/button>\n                            <\/div>\n                        <\/div>\n                        <!-- Centre Section -->\n                    <\/div>\n\n                <\/div>\n            <\/div>\n\n            <div style=\"display:flex;flex-direction: column;align-items: center;padding:0 20px\">\n                <div>\n                    <svg class=\"reverse-colours\" style=\"width:30px;\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n                        viewBox=\"0 0 512 512\"><!--!Font Awesome Free 6.7.1 by @fontawesome - https:\/\/fontawesome.com License - https:\/\/fontawesome.com\/license\/free Copyright 2024 Fonticons, Inc.-->\n                        <path\n                            d=\"M105.1 202.6c7.7-21.8 20.2-42.3 37.8-59.8c62.5-62.5 163.8-62.5 226.3 0L386.3 160 352 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l111.5 0c0 0 0 0 0 0l.4 0c17.7 0 32-14.3 32-32l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 35.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0C73.2 122 55.6 150.7 44.8 181.4c-5.9 16.7 2.9 34.9 19.5 40.8s34.9-2.9 40.8-19.5zM39 289.3c-5 1.5-9.8 4.2-13.7 8.2c-4 4-6.7 8.8-8.1 14c-.3 1.2-.6 2.5-.8 3.8c-.3 1.7-.4 3.4-.4 5.1L16 432c0 17.7 14.3 32 32 32s32-14.3 32-32l0-35.1 17.6 17.5c0 0 0 0 0 0c87.5 87.4 229.3 87.4 316.7 0c24.4-24.4 42.1-53.1 52.9-83.8c5.9-16.7-2.9-34.9-19.5-40.8s-34.9 2.9-40.8 19.5c-7.7 21.8-20.2 42.3-37.8 59.8c-62.5 62.5-163.8 62.5-226.3 0l-.1-.1L125.6 352l34.4 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L48.4 288c-1.6 0-3.2 .1-4.8 .3s-3.1 .5-4.6 1z\" \/>\n                    <\/svg>\n                <\/div>\n                <div>\n                    <p>\n                        Reverse\n                    <\/p>\n                <\/div>\n                <div style=\"display: flex;justify-content:start;margin-top:35px;\">\n                    <div style=\"width:100%\"><\/div>\n                    <div style=\"border-left:1px solid #acacac;height:60px;width:100%\"><\/div>\n                <\/div>\n            <\/div>\n\n\n\n            <!-- Right Section -->\n            <div>\n                <div style=\"display:flex; align-items: start;\">\n                    <div class=\"color-selector\">\n                        <div id=\"background-circle\" class=\"color-circle\"><\/div>\n                        <input type=\"color\" id=\"background-color\" class=\"color-input\" value=\"#ffffff\">\n                    <\/div>\n                    <div class=\"color-info\">\n                        <label for=\"background-color\">Color Two<\/label>\n                        <div\n                            style=\"display: flex;justify-content: space-between;align-items: center;padding:3px 10px;max-width:180px;width:100%;background:#F0F9FF;border-radius:8px;border:1px solid #06334A;\">\n                            <input aria-label=\"Input for Colour Two (Background Colour)\" type=\"text\" id=\"background-color-hex\" class=\"color-hex-input\" value=\"#000000\"\n                                style=\"background:#F0F9FF;border:0px\">\n                            <svg width=\"25\" height=\"25\" class=\"copy-colour-2\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n                                xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" version=\"1.1\" id=\"Layer_1\" x=\"0px\" y=\"0px\"\n                                viewBox=\"0 0 115.77 122.88\" xml:space=\"preserve\">\n                                <style type=\"text\/css\">\n                                    .st0 {\n                                        fill-rule: evenodd;\n                                        clip-rule: evenodd;\n                                    }\n                                <\/style>\n                                <g>\n                                    <path class=\"st0\" d=\"M89.62,13.96v7.73h12.19h0.01v0.02c3.85,0.01,7.34,1.57,9.86,4.1c2.5,2.51,4.06,5.98,4.07,9.82h0.02v0.02\n          v73.27v0.01h-0.02c-0.01,3.84-1.57,7.33-4.1,9.86c-2.51,2.5-5.98,4.06-9.82,4.07v0.02h-0.02h-61.7H40.1v-0.02\n          c-3.84-0.01-7.34-1.57-9.86-4.1c-2.5-2.51-4.06-5.98-4.07-9.82h-0.02v-0.02V92.51H13.96h-0.01v-0.02c-3.84-0.01-7.34-1.57-9.86-4.1\n          c-2.5-2.51-4.06-5.98-4.07-9.82H0v-0.02V13.96v-0.01h0.02c0.01-3.85,1.58-7.34,4.1-9.86c2.51-2.5,5.98-4.06,9.82-4.07V0h0.02h61.7\n          h0.01v0.02c3.85,0.01,7.34,1.57,9.86,4.1c2.5,2.51,4.06,5.98,4.07,9.82h0.02V13.96L89.62,13.96z M79.04,21.69v-7.73v-0.02h0.02\n          c0-0.91-0.39-1.75-1.01-2.37c-0.61-0.61-1.46-1-2.37-1v0.02h-0.01h-61.7h-0.02v-0.02c-0.91,0-1.75,0.39-2.37,1.01\n          c-0.61,0.61-1,1.46-1,2.37h0.02v0.01v64.59v0.02h-0.02c0,0.91,0.39,1.75,1.01,2.37c0.61,0.61,1.46,1,2.37,1v-0.02h0.01h12.19V35.65\n          v-0.01h0.02c0.01-3.85,1.58-7.34,4.1-9.86c2.51-2.5,5.98-4.06,9.82-4.07v-0.02h0.02H79.04L79.04,21.69z M105.18,108.92V35.65v-0.02\n          h0.02c0-0.91-0.39-1.75-1.01-2.37c-0.61-0.61-1.46-1-2.37-1v0.02h-0.01h-61.7h-0.02v-0.02c-0.91,0-1.75,0.39-2.37,1.01\n          c-0.61,0.61-1,1.46-1,2.37h0.02v0.01v73.27v0.02h-0.02c0,0.91,0.39,1.75,1.01,2.37c0.61,0.61,1.46,1,2.37,1v-0.02h0.01h61.7h0.02\n          v0.02c0.91,0,1.75-0.39,2.37-1.01c0.61-0.61,1-1.46,1-2.37h-0.02V108.92L105.18,108.92z\" \/>\n                                <\/g>\n                            <\/svg>\n    \n                        <\/div>\n    \n                    <\/div>\n                <\/div>\n\n                <div style=\"margin-top:25px\">\n                    <div class=\"\" style=\"display: flex;justify-content: start;\">\n                        <p style=\"font-size:15px;\">\n                            Current Contrast Ratio\n                        <\/p>\n                    <\/div>\n                    <div class=\"cc-column-2\">\n                        <h3 id=\"contrast-ratio\" class=\"contrast-ratio\" style=\"font-size:24px;\">\n                            0.00\n                        <\/h3>\n                    <\/div>\n                    <div class=\"cc-column-3\">\n                \n                    <\/div>\n                <\/div>\n\n            <\/div>\n        <\/div>\n\n    <\/div>\n\n\n    <div style=\"width:100%\" class=\"cc-two-col\">\n\n\n\n        <!-- Live Example -->\n        <div id=\"example-section\" style=\"padding:50px;margin-top:30px;margin-bottom:10px;\">\n            <h2>\n                Example title\n            <\/h2>\n            <p style=\"font-weight:300;\">\n                Example paragraph text\n            <\/p>\n            <input aria-label=\"Example input for the current colours that are selected\" type=\"text\" style=\"display: block;\">\n            <a href=\"\">Button<\/a>\n        <\/div>\n    <\/div>\n<\/div>\n<!-- end Contrast Checker 2 of 2 -->\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-d527d5a disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"d527d5a\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-0dc18fb\" data-id=\"0dc18fb\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-869cbab elementor-section-content-middle elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"869cbab\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-wide\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-726c25f\" data-id=\"726c25f\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a71db2a elementor-widget elementor-widget-text-editor\" data-id=\"a71db2a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2>How to use the Color Contrast checker?<\/h2><p>Using the Recite Me Color Contrast Checker is simple. Add the hex code or use the color selector to find your two desired colors.<\/p><p>The checker will immediately show the results in the box above, indicating if the contrast passes or fails WCAG compliance standards. The tool will highlight compliance results for small text, large text, and design elements.<\/p><p>If your selected colors do not meet the desired compliance level, you can find the nearest compliant color that meets AA or AAA standards. You can also use the &#8216;reverse&#8217; button to swap the foreground and background colors.<\/p><p>The tool will also provide an example section, where you can see how your chosen colors appear in titles, paragraph text, form fields, and buttons.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f46b384 elementor-align-center elementor-widget-mobile__width-auto elementor-widget-tablet__width-auto elementor-widget__width-auto elementor-invisible elementor-widget elementor-widget-button\" data-id=\"f46b384\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeIn&quot;}\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#colour-contrast-checker\" title=\"Use Contrast Checker\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Use Contrast Checker Now<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-1784ce8\" data-id=\"1784ce8\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-9f8db8f elementor-invisible elementor-widget elementor-widget-image\" data-id=\"9f8db8f\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInRight&quot;}\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"800\" src=\"https:\/\/reciteme.com\/us\/wp-content\/uploads\/sites\/2\/2025\/02\/1-Colour-Contrast-checker-icon.png\" class=\"attachment-large size-large wp-image-40467\" alt=\"colour contrast checker\" srcset=\"https:\/\/reciteme.com\/us\/wp-content\/uploads\/sites\/2\/2025\/02\/1-Colour-Contrast-checker-icon.png 882w, https:\/\/reciteme.com\/us\/wp-content\/uploads\/sites\/2\/2025\/02\/1-Colour-Contrast-checker-icon-300x300.png 300w, https:\/\/reciteme.com\/us\/wp-content\/uploads\/sites\/2\/2025\/02\/1-Colour-Contrast-checker-icon-150x150.png 150w, https:\/\/reciteme.com\/us\/wp-content\/uploads\/sites\/2\/2025\/02\/1-Colour-Contrast-checker-icon-768x768.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-301647b disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"301647b\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-8611cd8\" data-id=\"8611cd8\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-98380e5 elementor-section-content-middle elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"98380e5\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-wide\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-9d2ac30\" data-id=\"9d2ac30\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1150ba2 elementor-invisible elementor-widget elementor-widget-image\" data-id=\"1150ba2\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInRight&quot;}\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"800\" height=\"800\" src=\"https:\/\/reciteme.com\/us\/wp-content\/uploads\/sites\/2\/2025\/02\/2-Colour-Contrast-checker-icon.png\" class=\"attachment-large size-large wp-image-40468\" alt=\"color contrast levels\" srcset=\"https:\/\/reciteme.com\/us\/wp-content\/uploads\/sites\/2\/2025\/02\/2-Colour-Contrast-checker-icon.png 882w, https:\/\/reciteme.com\/us\/wp-content\/uploads\/sites\/2\/2025\/02\/2-Colour-Contrast-checker-icon-300x300.png 300w, https:\/\/reciteme.com\/us\/wp-content\/uploads\/sites\/2\/2025\/02\/2-Colour-Contrast-checker-icon-150x150.png 150w, https:\/\/reciteme.com\/us\/wp-content\/uploads\/sites\/2\/2025\/02\/2-Colour-Contrast-checker-icon-768x768.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-4054579\" data-id=\"4054579\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4583da2 elementor-widget elementor-widget-text-editor\" data-id=\"4583da2\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2>The importance of WCAG compliant color contrast<\/h2><p>WCAG-compliant color contrast ensures readability for users with visual impairments, including color blindness and low vision. By meeting WCAG requirements, websites enhance inclusivity, improve user experience, and comply with legal accessibility standards.<\/p><p>However, there are different levels of compliance that meet varying levels of success criteria:<\/p><ul><li>WCAG Level AA: This level requires a contrast ratio of at least 4.5:1 for normal text. Large text and design elements must meet a ratio of at least 3:1<\/li><li>WCAG Level AAA: This level requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-be10117 elementor-widget elementor-widget-text-editor\" data-id=\"be10117\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Businesses should aim to meet WCAG Level AA as a minimum standard, with the ultimate goal of achieving AAA compliance.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-30a29b9 elementor-align-center elementor-widget-mobile__width-auto elementor-widget-tablet__width-auto elementor-widget__width-auto elementor-invisible elementor-widget elementor-widget-button\" data-id=\"30a29b9\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeIn&quot;}\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#colour-contrast-checker\" title=\"Use Contrast Checker\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Use Contrast Checker Now<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-e218ab1 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"e218ab1\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-2a6b022\" data-id=\"2a6b022\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e3b7e05 elementor-widget elementor-widget-text-editor\" data-id=\"e3b7e05\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2 style=\"text-align: center\">Check out more accessibility resources<\/h2><p style=\"text-align: center\">The following resources are packed full of actionable tips and expert advice for making your digital content compliant with accessibility legislation:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-9013a9a disable-default elementor-section-content-space-between elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"9013a9a\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-b97cff1\" data-id=\"b97cff1\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-0eb3b04 elementor-widget elementor-widget-image\" data-id=\"0eb3b04\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/reciteme.com\/us\/free-accessibility-check\/\">\n\t\t\t\t\t\t\t<img decoding=\"async\" width=\"800\" height=\"450\" src=\"https:\/\/reciteme.com\/us\/wp-content\/uploads\/sites\/2\/2025\/02\/Checker-Thumbnail-1024x576.jpg\" class=\"attachment-large size-large wp-image-40486\" alt=\"\" srcset=\"https:\/\/reciteme.com\/us\/wp-content\/uploads\/sites\/2\/2025\/02\/Checker-Thumbnail-1024x576.jpg 1024w, https:\/\/reciteme.com\/us\/wp-content\/uploads\/sites\/2\/2025\/02\/Checker-Thumbnail-300x169.jpg 300w, https:\/\/reciteme.com\/us\/wp-content\/uploads\/sites\/2\/2025\/02\/Checker-Thumbnail-768x432.jpg 768w, https:\/\/reciteme.com\/us\/wp-content\/uploads\/sites\/2\/2025\/02\/Checker-Thumbnail-1536x864.jpg 1536w, https:\/\/reciteme.com\/us\/wp-content\/uploads\/sites\/2\/2025\/02\/Checker-Thumbnail.jpg 1920w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d3bc3cc elementor-widget elementor-widget-text-editor\" data-id=\"d3bc3cc\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Free Website Accessibility Check<\/b><\/p><p>Run a free accessibility scan to detect any inaccessibility on your website and how to fix it.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8ad2f2a elementor-widget elementor-widget-button\" data-id=\"8ad2f2a\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/reciteme.com\/us\/free-accessibility-check\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Download Free Check<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-2cbdb8e\" data-id=\"2cbdb8e\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c2007ac elementor-widget elementor-widget-image\" data-id=\"c2007ac\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/reciteme.com\/us\/download\/accessibility-and-inclusion-toolkit\/\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"450\" src=\"https:\/\/reciteme.com\/us\/wp-content\/uploads\/sites\/2\/2025\/02\/Online-Accessibility-and-Inclusion-Toolkit-Thumbnail-1024x576.jpg\" class=\"attachment-large size-large wp-image-40487\" alt=\"\" srcset=\"https:\/\/reciteme.com\/us\/wp-content\/uploads\/sites\/2\/2025\/02\/Online-Accessibility-and-Inclusion-Toolkit-Thumbnail-1024x576.jpg 1024w, https:\/\/reciteme.com\/us\/wp-content\/uploads\/sites\/2\/2025\/02\/Online-Accessibility-and-Inclusion-Toolkit-Thumbnail-300x169.jpg 300w, https:\/\/reciteme.com\/us\/wp-content\/uploads\/sites\/2\/2025\/02\/Online-Accessibility-and-Inclusion-Toolkit-Thumbnail-768x432.jpg 768w, https:\/\/reciteme.com\/us\/wp-content\/uploads\/sites\/2\/2025\/02\/Online-Accessibility-and-Inclusion-Toolkit-Thumbnail-1536x864.jpg 1536w, https:\/\/reciteme.com\/us\/wp-content\/uploads\/sites\/2\/2025\/02\/Online-Accessibility-and-Inclusion-Toolkit-Thumbnail.jpg 1920w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-945710f elementor-widget elementor-widget-text-editor\" data-id=\"945710f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Accessibility &amp; Inclusion Toolkit<br \/><\/b><\/p><p>Discover new tips and tricks to ensure your organisation is accessible and inclusive to customers.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b34469c elementor-widget elementor-widget-button\" data-id=\"b34469c\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/reciteme.com\/us\/download\/accessibility-and-inclusion-toolkit\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Download Free Toolkit<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-04a48c4\" data-id=\"04a48c4\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d849bed elementor-widget elementor-widget-image\" data-id=\"d849bed\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/downloads.reciteme.com\/website-accessibility-checklist\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"450\" src=\"https:\/\/reciteme.com\/us\/wp-content\/uploads\/sites\/2\/2025\/02\/Marketing-ICP-Accessibility-Checklist-Thumbnail-1024x576.jpg\" class=\"attachment-large size-large wp-image-40488\" alt=\"\" srcset=\"https:\/\/reciteme.com\/us\/wp-content\/uploads\/sites\/2\/2025\/02\/Marketing-ICP-Accessibility-Checklist-Thumbnail-1024x576.jpg 1024w, https:\/\/reciteme.com\/us\/wp-content\/uploads\/sites\/2\/2025\/02\/Marketing-ICP-Accessibility-Checklist-Thumbnail-300x169.jpg 300w, https:\/\/reciteme.com\/us\/wp-content\/uploads\/sites\/2\/2025\/02\/Marketing-ICP-Accessibility-Checklist-Thumbnail-768x432.jpg 768w, https:\/\/reciteme.com\/us\/wp-content\/uploads\/sites\/2\/2025\/02\/Marketing-ICP-Accessibility-Checklist-Thumbnail-1536x864.jpg 1536w, https:\/\/reciteme.com\/us\/wp-content\/uploads\/sites\/2\/2025\/02\/Marketing-ICP-Accessibility-Checklist-Thumbnail.jpg 1920w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-722bfb5 elementor-widget elementor-widget-text-editor\" data-id=\"722bfb5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Website Accessibility Checklist<br \/><\/b><\/p><p>Develop your knowledge of website accessibility. Discover strategies to make your website accessible.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3098633 elementor-widget elementor-widget-button\" data-id=\"3098633\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/downloads.reciteme.com\/website-accessibility-checklist\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Download Free Checklist<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Ensure readability &amp; accessibility with Color Contrast! Learn how colour choices impact visibility &amp; inclusivity for all users.<\/p>\n","protected":false},"author":20,"featured_media":40481,"comment_status":"closed","ping_status":"open","sticky":false,"template":"elementor_header_footer","format":"standard","meta":{"_acf_changed":false,"content-type":"","footnotes":""},"categories":[159],"tags":[],"departments":[],"type_tag":[],"flag":[],"class_list":["post-40396","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-product"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Colour Contrast Checker - WCAG Compliant<\/title>\n<meta name=\"description\" content=\"Ensure readability &amp; accessibility with Color Contrast! Learn how color choices impact visibility &amp; inclusivity for all users.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Colour Contrast Checker - WCAG Compliant\" \/>\n<meta property=\"og:description\" content=\"Ensure readability &amp; accessibility with Color Contrast! Learn how color choices impact visibility &amp; inclusivity for all users.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/reciteme.com\/us\/product\/color-contrast-checker\/\" \/>\n<meta property=\"og:site_name\" content=\"Recite Me\" \/>\n<meta property=\"article:published_time\" content=\"2025-02-14T08:47:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-28T10:28:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/reciteme.com\/us\/wp-content\/uploads\/sites\/2\/2025\/02\/Contrast-Checker-US-Thumbnail.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"scotth\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"scotth\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/reciteme.com\/us\/product\/color-contrast-checker\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/reciteme.com\/us\/product\/color-contrast-checker\/\"},\"author\":{\"name\":\"scotth\",\"@id\":\"https:\/\/reciteme.com\/us\/#\/schema\/person\/b728d13cd95cf53025eda2b60720b44d\"},\"headline\":\"Color Contrast Checker\",\"datePublished\":\"2025-02-14T08:47:30+00:00\",\"dateModified\":\"2025-04-28T10:28:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/reciteme.com\/us\/product\/color-contrast-checker\/\"},\"wordCount\":781,\"publisher\":{\"@id\":\"https:\/\/reciteme.com\/us\/#organization\"},\"image\":{\"@id\":\"https:\/\/reciteme.com\/us\/product\/color-contrast-checker\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/reciteme.com\/us\/wp-content\/uploads\/sites\/2\/2025\/02\/Contrast-Checker-US-Thumbnail.jpg\",\"articleSection\":[\"Product\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/reciteme.com\/us\/product\/color-contrast-checker\/\",\"url\":\"https:\/\/reciteme.com\/us\/product\/color-contrast-checker\/\",\"name\":\"Colour Contrast Checker - WCAG Compliant\",\"isPartOf\":{\"@id\":\"https:\/\/reciteme.com\/us\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/reciteme.com\/us\/product\/color-contrast-checker\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/reciteme.com\/us\/product\/color-contrast-checker\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/reciteme.com\/us\/wp-content\/uploads\/sites\/2\/2025\/02\/Contrast-Checker-US-Thumbnail.jpg\",\"datePublished\":\"2025-02-14T08:47:30+00:00\",\"dateModified\":\"2025-04-28T10:28:06+00:00\",\"description\":\"Ensure readability & accessibility with Color Contrast! Learn how color choices impact visibility & inclusivity for all users.\",\"breadcrumb\":{\"@id\":\"https:\/\/reciteme.com\/us\/product\/color-contrast-checker\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/reciteme.com\/us\/product\/color-contrast-checker\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/reciteme.com\/us\/product\/color-contrast-checker\/#primaryimage\",\"url\":\"https:\/\/reciteme.com\/us\/wp-content\/uploads\/sites\/2\/2025\/02\/Contrast-Checker-US-Thumbnail.jpg\",\"contentUrl\":\"https:\/\/reciteme.com\/us\/wp-content\/uploads\/sites\/2\/2025\/02\/Contrast-Checker-US-Thumbnail.jpg\",\"width\":1920,\"height\":1080,\"caption\":\"color contrast checker\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/reciteme.com\/us\/product\/color-contrast-checker\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/reciteme.com\/us\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Color Contrast Checker\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/reciteme.com\/us\/#website\",\"url\":\"https:\/\/reciteme.com\/us\/\",\"name\":\"Recite Me\",\"description\":\"Recite Me Website\",\"publisher\":{\"@id\":\"https:\/\/reciteme.com\/us\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/reciteme.com\/us\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/reciteme.com\/us\/#organization\",\"name\":\"Recite Me\",\"url\":\"https:\/\/reciteme.com\/us\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/reciteme.com\/us\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/reciteme.com\/us\/wp-content\/uploads\/sites\/2\/2022\/04\/cropped-Recite-logo-350px-@2x.png\",\"contentUrl\":\"https:\/\/reciteme.com\/us\/wp-content\/uploads\/sites\/2\/2022\/04\/cropped-Recite-logo-350px-@2x.png\",\"width\":622,\"height\":200,\"caption\":\"Recite Me\"},\"image\":{\"@id\":\"https:\/\/reciteme.com\/us\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/reciteme.com\/us\/#\/schema\/person\/b728d13cd95cf53025eda2b60720b44d\",\"name\":\"scotth\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/reciteme.com\/us\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c16a03f189beded1d8d630b67e27f2900f86b7da577f31a27183dff911fc8608?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c16a03f189beded1d8d630b67e27f2900f86b7da577f31a27183dff911fc8608?s=96&d=mm&r=g\",\"caption\":\"scotth\"},\"url\":\"https:\/\/reciteme.com\/us\/author\/scotth\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Colour Contrast Checker - WCAG Compliant","description":"Ensure readability & accessibility with Color Contrast! Learn how color choices impact visibility & inclusivity for all users.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"Colour Contrast Checker - WCAG Compliant","og_description":"Ensure readability & accessibility with Color Contrast! Learn how color choices impact visibility & inclusivity for all users.","og_url":"https:\/\/reciteme.com\/us\/product\/color-contrast-checker\/","og_site_name":"Recite Me","article_published_time":"2025-02-14T08:47:30+00:00","article_modified_time":"2025-04-28T10:28:06+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/reciteme.com\/us\/wp-content\/uploads\/sites\/2\/2025\/02\/Contrast-Checker-US-Thumbnail.jpg","type":"image\/jpeg"}],"author":"scotth","twitter_card":"summary_large_image","twitter_misc":{"Written by":"scotth","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/reciteme.com\/us\/product\/color-contrast-checker\/#article","isPartOf":{"@id":"https:\/\/reciteme.com\/us\/product\/color-contrast-checker\/"},"author":{"name":"scotth","@id":"https:\/\/reciteme.com\/us\/#\/schema\/person\/b728d13cd95cf53025eda2b60720b44d"},"headline":"Color Contrast Checker","datePublished":"2025-02-14T08:47:30+00:00","dateModified":"2025-04-28T10:28:06+00:00","mainEntityOfPage":{"@id":"https:\/\/reciteme.com\/us\/product\/color-contrast-checker\/"},"wordCount":781,"publisher":{"@id":"https:\/\/reciteme.com\/us\/#organization"},"image":{"@id":"https:\/\/reciteme.com\/us\/product\/color-contrast-checker\/#primaryimage"},"thumbnailUrl":"https:\/\/reciteme.com\/us\/wp-content\/uploads\/sites\/2\/2025\/02\/Contrast-Checker-US-Thumbnail.jpg","articleSection":["Product"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/reciteme.com\/us\/product\/color-contrast-checker\/","url":"https:\/\/reciteme.com\/us\/product\/color-contrast-checker\/","name":"Colour Contrast Checker - WCAG Compliant","isPartOf":{"@id":"https:\/\/reciteme.com\/us\/#website"},"primaryImageOfPage":{"@id":"https:\/\/reciteme.com\/us\/product\/color-contrast-checker\/#primaryimage"},"image":{"@id":"https:\/\/reciteme.com\/us\/product\/color-contrast-checker\/#primaryimage"},"thumbnailUrl":"https:\/\/reciteme.com\/us\/wp-content\/uploads\/sites\/2\/2025\/02\/Contrast-Checker-US-Thumbnail.jpg","datePublished":"2025-02-14T08:47:30+00:00","dateModified":"2025-04-28T10:28:06+00:00","description":"Ensure readability & accessibility with Color Contrast! Learn how color choices impact visibility & inclusivity for all users.","breadcrumb":{"@id":"https:\/\/reciteme.com\/us\/product\/color-contrast-checker\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/reciteme.com\/us\/product\/color-contrast-checker\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/reciteme.com\/us\/product\/color-contrast-checker\/#primaryimage","url":"https:\/\/reciteme.com\/us\/wp-content\/uploads\/sites\/2\/2025\/02\/Contrast-Checker-US-Thumbnail.jpg","contentUrl":"https:\/\/reciteme.com\/us\/wp-content\/uploads\/sites\/2\/2025\/02\/Contrast-Checker-US-Thumbnail.jpg","width":1920,"height":1080,"caption":"color contrast checker"},{"@type":"BreadcrumbList","@id":"https:\/\/reciteme.com\/us\/product\/color-contrast-checker\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/reciteme.com\/us\/"},{"@type":"ListItem","position":2,"name":"Color Contrast Checker"}]},{"@type":"WebSite","@id":"https:\/\/reciteme.com\/us\/#website","url":"https:\/\/reciteme.com\/us\/","name":"Recite Me","description":"Recite Me Website","publisher":{"@id":"https:\/\/reciteme.com\/us\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/reciteme.com\/us\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/reciteme.com\/us\/#organization","name":"Recite Me","url":"https:\/\/reciteme.com\/us\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/reciteme.com\/us\/#\/schema\/logo\/image\/","url":"https:\/\/reciteme.com\/us\/wp-content\/uploads\/sites\/2\/2022\/04\/cropped-Recite-logo-350px-@2x.png","contentUrl":"https:\/\/reciteme.com\/us\/wp-content\/uploads\/sites\/2\/2022\/04\/cropped-Recite-logo-350px-@2x.png","width":622,"height":200,"caption":"Recite Me"},"image":{"@id":"https:\/\/reciteme.com\/us\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/reciteme.com\/us\/#\/schema\/person\/b728d13cd95cf53025eda2b60720b44d","name":"scotth","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/reciteme.com\/us\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c16a03f189beded1d8d630b67e27f2900f86b7da577f31a27183dff911fc8608?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c16a03f189beded1d8d630b67e27f2900f86b7da577f31a27183dff911fc8608?s=96&d=mm&r=g","caption":"scotth"},"url":"https:\/\/reciteme.com\/us\/author\/scotth\/"}]}},"_links":{"self":[{"href":"https:\/\/reciteme.com\/us\/wp-json\/wp\/v2\/posts\/40396","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/reciteme.com\/us\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/reciteme.com\/us\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/reciteme.com\/us\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/reciteme.com\/us\/wp-json\/wp\/v2\/comments?post=40396"}],"version-history":[{"count":28,"href":"https:\/\/reciteme.com\/us\/wp-json\/wp\/v2\/posts\/40396\/revisions"}],"predecessor-version":[{"id":42004,"href":"https:\/\/reciteme.com\/us\/wp-json\/wp\/v2\/posts\/40396\/revisions\/42004"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/reciteme.com\/us\/wp-json\/wp\/v2\/media\/40481"}],"wp:attachment":[{"href":"https:\/\/reciteme.com\/us\/wp-json\/wp\/v2\/media?parent=40396"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/reciteme.com\/us\/wp-json\/wp\/v2\/categories?post=40396"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/reciteme.com\/us\/wp-json\/wp\/v2\/tags?post=40396"},{"taxonomy":"departments","embeddable":true,"href":"https:\/\/reciteme.com\/us\/wp-json\/wp\/v2\/departments?post=40396"},{"taxonomy":"type_tag","embeddable":true,"href":"https:\/\/reciteme.com\/us\/wp-json\/wp\/v2\/type_tag?post=40396"},{"taxonomy":"flag","embeddable":true,"href":"https:\/\/reciteme.com\/us\/wp-json\/wp\/v2\/flag?post=40396"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}