{"id":32597,"date":"2025-02-14T08:51:37","date_gmt":"2025-02-14T08:51:37","guid":{"rendered":"https:\/\/reciteme.com\/au\/?p=32597"},"modified":"2025-04-28T13:05:19","modified_gmt":"2025-04-28T12:05:19","slug":"colour-contrast-checker","status":"publish","type":"post","link":"https:\/\/reciteme.com\/au\/product\/colour-contrast-checker\/","title":{"rendered":"Colour Contrast Checker"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"32597\" class=\"elementor elementor-32597\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3ae1e4e e-flex e-con-boxed e-con e-parent\" data-id=\"3ae1e4e\" 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-4332e58 e-flex e-con-boxed e-con e-child\" data-id=\"4332e58\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-87f963f e-flex e-con-boxed e-con e-child\" data-id=\"87f963f\" 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-c37ebe0 elementor-widget elementor-widget-heading\" data-id=\"c37ebe0\" 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-4abd8c1 disable-default cc-title-header elementor-widget elementor-widget-heading\" data-id=\"4abd8c1\" 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\">Colour 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-eb6bd6c elementor-widget-divider--view-line elementor-invisible elementor-widget elementor-widget-divider\" data-id=\"eb6bd6c\" 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-0a2c215 elementor-widget elementor-widget-text-editor\" data-id=\"0a2c215\" 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 Colour Contrast Checker is a user-friendly tool designed to help you evaluate the contrast between foreground and background colours 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-ad54449 elementor-widget elementor-widget-button\" data-id=\"ad54449\" 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=\"\/au\/\/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-ab6b001 e-flex e-con-boxed e-con e-child\" data-id=\"ab6b001\" 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-87a7bf0 elementor-widget elementor-widget-ucaddon_contrast_checker_2_of_3\" data-id=\"87a7bf0\" 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-9c88076 e-con-full e-flex e-con e-child\" data-id=\"9c88076\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a9bad76 elementor-widget-tablet__width-initial elementor-widget__width-inherit elementor-widget elementor-widget-ucaddon_contrast_checker\" data-id=\"a9bad76\" 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 Colours\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\">Colour 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\">Colour 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-95bbb91 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"95bbb91\" 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-7608208\" data-id=\"7608208\" 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-d0ff126 elementor-section-content-middle elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"d0ff126\" 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-d4ec46e\" data-id=\"d4ec46e\" 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-c01416b elementor-widget elementor-widget-text-editor\" data-id=\"c01416b\" 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 Colour Contrast checker?<\/h2><p>Using the Recite Me Colour Contrast Checker is simple. Add the hex code or use the colour selector to find your two desired colours.<\/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 colours do not meet the desired compliance level, you can find the nearest compliant colour that meets AA or AAA standards. You can also use the &#8216;reverse&#8217; button to swap the foreground and background colours.<\/p><p>The tool will also provide an example section, where you can see how your chosen colours 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-029b9e1 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=\"029b9e1\" 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-4f05670\" data-id=\"4f05670\" 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-e8fa534 elementor-invisible elementor-widget elementor-widget-image\" data-id=\"e8fa534\" 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\/au\/wp-content\/uploads\/sites\/3\/2025\/02\/1-Colour-Contrast-checker-icon.png\" class=\"attachment-large size-large wp-image-32654\" alt=\"colour contrast checker\" srcset=\"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/02\/1-Colour-Contrast-checker-icon.png 882w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/02\/1-Colour-Contrast-checker-icon-300x300.png 300w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/02\/1-Colour-Contrast-checker-icon-150x150.png 150w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/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-5e6ce17 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5e6ce17\" 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-7dc4bde\" data-id=\"7dc4bde\" 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-1f5f727 elementor-section-content-middle elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1f5f727\" 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-971f658\" data-id=\"971f658\" 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-c0e9c52 elementor-invisible elementor-widget elementor-widget-image\" data-id=\"c0e9c52\" 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\/au\/wp-content\/uploads\/sites\/3\/2025\/02\/2-Colour-Contrast-checker-icon.png\" class=\"attachment-large size-large wp-image-32655\" alt=\"colour contrast levels\" srcset=\"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/02\/2-Colour-Contrast-checker-icon.png 882w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/02\/2-Colour-Contrast-checker-icon-300x300.png 300w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/02\/2-Colour-Contrast-checker-icon-150x150.png 150w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/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-aaefff9\" data-id=\"aaefff9\" 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-eccece1 elementor-widget elementor-widget-text-editor\" data-id=\"eccece1\" 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 colour contrast<\/h2><p>WCAG-compliant colour contrast ensures readability for users with visual impairments, including colour 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-ae079bb elementor-widget elementor-widget-text-editor\" data-id=\"ae079bb\" 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-c00793b 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=\"c00793b\" 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-978fd82 disable-default elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"978fd82\" 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-349b7ac\" data-id=\"349b7ac\" 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-bfdf863 elementor-widget elementor-widget-text-editor\" data-id=\"bfdf863\" 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-c7603ae disable-default elementor-section-content-space-between elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"c7603ae\" 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-f0060da\" data-id=\"f0060da\" 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-bf88451 elementor-widget elementor-widget-image\" data-id=\"bf88451\" 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\/au\/free-accessibility-check\/\">\n\t\t\t\t\t\t\t<img decoding=\"async\" width=\"800\" height=\"450\" src=\"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/02\/Checker-Thumbnail-1024x576.jpg\" class=\"attachment-large size-large wp-image-32669\" alt=\"\" srcset=\"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/02\/Checker-Thumbnail-1024x576.jpg 1024w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/02\/Checker-Thumbnail-300x169.jpg 300w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/02\/Checker-Thumbnail-768x432.jpg 768w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/02\/Checker-Thumbnail-1536x864.jpg 1536w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/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-e410a75 elementor-widget elementor-widget-text-editor\" data-id=\"e410a75\" 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-6928566 elementor-widget elementor-widget-button\" data-id=\"6928566\" 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\/au\/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-553081b\" data-id=\"553081b\" 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-a359453 elementor-widget elementor-widget-image\" data-id=\"a359453\" 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\/au\/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\/au\/wp-content\/uploads\/sites\/3\/2025\/02\/Online-Accessibility-and-Inclusion-Toolkit-Thumbnail-1024x576.jpg\" class=\"attachment-large size-large wp-image-32670\" alt=\"\" srcset=\"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/02\/Online-Accessibility-and-Inclusion-Toolkit-Thumbnail-1024x576.jpg 1024w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/02\/Online-Accessibility-and-Inclusion-Toolkit-Thumbnail-300x169.jpg 300w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/02\/Online-Accessibility-and-Inclusion-Toolkit-Thumbnail-768x432.jpg 768w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/02\/Online-Accessibility-and-Inclusion-Toolkit-Thumbnail-1536x864.jpg 1536w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/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-44d2896 elementor-widget elementor-widget-text-editor\" data-id=\"44d2896\" 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-570af76 elementor-widget elementor-widget-button\" data-id=\"570af76\" 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\/au\/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-2641686\" data-id=\"2641686\" 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-56f4744 elementor-widget elementor-widget-image\" data-id=\"56f4744\" 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\/en-au\/website-accessibility-checklist\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"450\" src=\"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/02\/Marketing-ICP-Accessibility-Checklist-Thumbnail-1024x576.jpg\" class=\"attachment-large size-large wp-image-32671\" alt=\"\" srcset=\"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/02\/Marketing-ICP-Accessibility-Checklist-Thumbnail-1024x576.jpg 1024w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/02\/Marketing-ICP-Accessibility-Checklist-Thumbnail-300x169.jpg 300w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/02\/Marketing-ICP-Accessibility-Checklist-Thumbnail-768x432.jpg 768w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/02\/Marketing-ICP-Accessibility-Checklist-Thumbnail-1536x864.jpg 1536w, https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/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-527c3c4 elementor-widget elementor-widget-text-editor\" data-id=\"527c3c4\" 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-44f2108 elementor-widget elementor-widget-button\" data-id=\"44f2108\" 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\/en-au\/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 Colour Contrast! Learn how colour choices impact visibility &amp; inclusivity for all users.<\/p>\n","protected":false},"author":20,"featured_media":32664,"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-32597","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 Colour Contrast! Learn how colour 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_GB\" \/>\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 Colour Contrast! Learn how colour choices impact visibility &amp; inclusivity for all users.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/reciteme.com\/au\/product\/colour-contrast-checker\/\" \/>\n<meta property=\"og:site_name\" content=\"Recite Me\" \/>\n<meta property=\"article:published_time\" content=\"2025-02-14T08:51:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-28T12:05:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/02\/Contrast-Checker-UK-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=\"Estimated 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\/au\/product\/colour-contrast-checker\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/reciteme.com\/au\/product\/colour-contrast-checker\/\"},\"author\":{\"name\":\"scotth\",\"@id\":\"https:\/\/reciteme.com\/au\/#\/schema\/person\/b728d13cd95cf53025eda2b60720b44d\"},\"headline\":\"Colour Contrast Checker\",\"datePublished\":\"2025-02-14T08:51:37+00:00\",\"dateModified\":\"2025-04-28T12:05:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/reciteme.com\/au\/product\/colour-contrast-checker\/\"},\"wordCount\":781,\"publisher\":{\"@id\":\"https:\/\/reciteme.com\/au\/#organization\"},\"image\":{\"@id\":\"https:\/\/reciteme.com\/au\/product\/colour-contrast-checker\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/02\/Contrast-Checker-UK-Thumbnail.jpg\",\"articleSection\":[\"Product\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/reciteme.com\/au\/product\/colour-contrast-checker\/\",\"url\":\"https:\/\/reciteme.com\/au\/product\/colour-contrast-checker\/\",\"name\":\"Colour Contrast Checker - WCAG Compliant\",\"isPartOf\":{\"@id\":\"https:\/\/reciteme.com\/au\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/reciteme.com\/au\/product\/colour-contrast-checker\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/reciteme.com\/au\/product\/colour-contrast-checker\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/02\/Contrast-Checker-UK-Thumbnail.jpg\",\"datePublished\":\"2025-02-14T08:51:37+00:00\",\"dateModified\":\"2025-04-28T12:05:19+00:00\",\"description\":\"Ensure readability & accessibility with Colour Contrast! Learn how colour choices impact visibility & inclusivity for all users.\",\"breadcrumb\":{\"@id\":\"https:\/\/reciteme.com\/au\/product\/colour-contrast-checker\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/reciteme.com\/au\/product\/colour-contrast-checker\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/reciteme.com\/au\/product\/colour-contrast-checker\/#primaryimage\",\"url\":\"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/02\/Contrast-Checker-UK-Thumbnail.jpg\",\"contentUrl\":\"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/02\/Contrast-Checker-UK-Thumbnail.jpg\",\"width\":1920,\"height\":1080,\"caption\":\"colour contrast checker\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/reciteme.com\/au\/product\/colour-contrast-checker\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/reciteme.com\/au\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Colour Contrast Checker\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/reciteme.com\/au\/#website\",\"url\":\"https:\/\/reciteme.com\/au\/\",\"name\":\"Recite Me\",\"description\":\"Recite Me Website\",\"publisher\":{\"@id\":\"https:\/\/reciteme.com\/au\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/reciteme.com\/au\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/reciteme.com\/au\/#organization\",\"name\":\"Recite Me\",\"url\":\"https:\/\/reciteme.com\/au\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/reciteme.com\/au\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2022\/03\/Recite_Logo_NewRed.png\",\"contentUrl\":\"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2022\/03\/Recite_Logo_NewRed.png\",\"width\":246,\"height\":80,\"caption\":\"Recite Me\"},\"image\":{\"@id\":\"https:\/\/reciteme.com\/au\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/reciteme.com\/au\/#\/schema\/person\/b728d13cd95cf53025eda2b60720b44d\",\"name\":\"scotth\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/reciteme.com\/au\/#\/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\/au\/author\/scotth\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Colour Contrast Checker - WCAG Compliant","description":"Ensure readability & accessibility with Colour Contrast! Learn how colour 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_GB","og_type":"article","og_title":"Colour Contrast Checker - WCAG Compliant","og_description":"Ensure readability & accessibility with Colour Contrast! Learn how colour choices impact visibility & inclusivity for all users.","og_url":"https:\/\/reciteme.com\/au\/product\/colour-contrast-checker\/","og_site_name":"Recite Me","article_published_time":"2025-02-14T08:51:37+00:00","article_modified_time":"2025-04-28T12:05:19+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/02\/Contrast-Checker-UK-Thumbnail.jpg","type":"image\/jpeg"}],"author":"scotth","twitter_card":"summary_large_image","twitter_misc":{"Written by":"scotth","Estimated reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/reciteme.com\/au\/product\/colour-contrast-checker\/#article","isPartOf":{"@id":"https:\/\/reciteme.com\/au\/product\/colour-contrast-checker\/"},"author":{"name":"scotth","@id":"https:\/\/reciteme.com\/au\/#\/schema\/person\/b728d13cd95cf53025eda2b60720b44d"},"headline":"Colour Contrast Checker","datePublished":"2025-02-14T08:51:37+00:00","dateModified":"2025-04-28T12:05:19+00:00","mainEntityOfPage":{"@id":"https:\/\/reciteme.com\/au\/product\/colour-contrast-checker\/"},"wordCount":781,"publisher":{"@id":"https:\/\/reciteme.com\/au\/#organization"},"image":{"@id":"https:\/\/reciteme.com\/au\/product\/colour-contrast-checker\/#primaryimage"},"thumbnailUrl":"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/02\/Contrast-Checker-UK-Thumbnail.jpg","articleSection":["Product"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/reciteme.com\/au\/product\/colour-contrast-checker\/","url":"https:\/\/reciteme.com\/au\/product\/colour-contrast-checker\/","name":"Colour Contrast Checker - WCAG Compliant","isPartOf":{"@id":"https:\/\/reciteme.com\/au\/#website"},"primaryImageOfPage":{"@id":"https:\/\/reciteme.com\/au\/product\/colour-contrast-checker\/#primaryimage"},"image":{"@id":"https:\/\/reciteme.com\/au\/product\/colour-contrast-checker\/#primaryimage"},"thumbnailUrl":"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/02\/Contrast-Checker-UK-Thumbnail.jpg","datePublished":"2025-02-14T08:51:37+00:00","dateModified":"2025-04-28T12:05:19+00:00","description":"Ensure readability & accessibility with Colour Contrast! Learn how colour choices impact visibility & inclusivity for all users.","breadcrumb":{"@id":"https:\/\/reciteme.com\/au\/product\/colour-contrast-checker\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/reciteme.com\/au\/product\/colour-contrast-checker\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/reciteme.com\/au\/product\/colour-contrast-checker\/#primaryimage","url":"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/02\/Contrast-Checker-UK-Thumbnail.jpg","contentUrl":"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2025\/02\/Contrast-Checker-UK-Thumbnail.jpg","width":1920,"height":1080,"caption":"colour contrast checker"},{"@type":"BreadcrumbList","@id":"https:\/\/reciteme.com\/au\/product\/colour-contrast-checker\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/reciteme.com\/au\/"},{"@type":"ListItem","position":2,"name":"Colour Contrast Checker"}]},{"@type":"WebSite","@id":"https:\/\/reciteme.com\/au\/#website","url":"https:\/\/reciteme.com\/au\/","name":"Recite Me","description":"Recite Me Website","publisher":{"@id":"https:\/\/reciteme.com\/au\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/reciteme.com\/au\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/reciteme.com\/au\/#organization","name":"Recite Me","url":"https:\/\/reciteme.com\/au\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/reciteme.com\/au\/#\/schema\/logo\/image\/","url":"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2022\/03\/Recite_Logo_NewRed.png","contentUrl":"https:\/\/reciteme.com\/au\/wp-content\/uploads\/sites\/3\/2022\/03\/Recite_Logo_NewRed.png","width":246,"height":80,"caption":"Recite Me"},"image":{"@id":"https:\/\/reciteme.com\/au\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/reciteme.com\/au\/#\/schema\/person\/b728d13cd95cf53025eda2b60720b44d","name":"scotth","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/reciteme.com\/au\/#\/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\/au\/author\/scotth\/"}]}},"_links":{"self":[{"href":"https:\/\/reciteme.com\/au\/wp-json\/wp\/v2\/posts\/32597","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/reciteme.com\/au\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/reciteme.com\/au\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/reciteme.com\/au\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/reciteme.com\/au\/wp-json\/wp\/v2\/comments?post=32597"}],"version-history":[{"count":40,"href":"https:\/\/reciteme.com\/au\/wp-json\/wp\/v2\/posts\/32597\/revisions"}],"predecessor-version":[{"id":33243,"href":"https:\/\/reciteme.com\/au\/wp-json\/wp\/v2\/posts\/32597\/revisions\/33243"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/reciteme.com\/au\/wp-json\/wp\/v2\/media\/32664"}],"wp:attachment":[{"href":"https:\/\/reciteme.com\/au\/wp-json\/wp\/v2\/media?parent=32597"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/reciteme.com\/au\/wp-json\/wp\/v2\/categories?post=32597"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/reciteme.com\/au\/wp-json\/wp\/v2\/tags?post=32597"},{"taxonomy":"departments","embeddable":true,"href":"https:\/\/reciteme.com\/au\/wp-json\/wp\/v2\/departments?post=32597"},{"taxonomy":"type_tag","embeddable":true,"href":"https:\/\/reciteme.com\/au\/wp-json\/wp\/v2\/type_tag?post=32597"},{"taxonomy":"flag","embeddable":true,"href":"https:\/\/reciteme.com\/au\/wp-json\/wp\/v2\/flag?post=32597"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}