[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"categories-en-US":3,"blog-categories-en-US":3,"resource-colour-contrast-checker-en-US":4,"featured-sidebar-data-en-US":3,"latest-resources-en-US":58,"alternatives-colour-contrast-checker-en-US":123,"related-resources-colour-contrast-checker-en-US":156},true,{"id":5,"name":6,"slug":7,"url":8,"date_updated":9,"images_other":9,"tagline":10,"description":11,"seo":12,"features":15,"pros":23,"cons":29,"best_for":34,"cover":35,"icon":9,"pricing":36,"platform":37,"github_url":9,"twitter_url":9,"discord_url":9,"dribbble_url":9,"pricing_tiers":39,"views_count":40,"featured_rank":9,"categories":41,"tags":46,"files":9},830,"Colour Contrast Checker","colour-contrast-checker","https:\u002F\u002Fcolourcontrast.cc\u002F",null,"Simple WCAG color contrast checker for accessible design","Colour Contrast Checker is a straightforward web tool that helps designers and developers verify color contrast ratios against WCAG accessibility guidelines. Simply enter a foreground and background color to instantly see how they perform against AA and AAA standards for normal text, large text, and UI components.\n\nThe tool supports multiple color formats including hex, RGB, and HSL, with an interactive color picker for easy adjustment. It also features a live preview with sample text at different sizes, making it easy to understand how your color choices will look in practice. The contrast ratio is calculated in real-time as you adjust colors, with clear pass\u002Ffail indicators for each WCAG level.\n\nWhether you are designing a website, mobile app, or any digital interface, ensuring proper color contrast is essential for accessibility. Colour Contrast Checker makes this process quick and intuitive.",{"title":13,"meta_description":14},"Colour Contrast Checker — Simple WCAG color contrast checker for accessible design","Colour Contrast Checker is a straightforward web tool that helps designers and developers verify color contrast ratios against WCAG accessibility guidelines....",[16,17,18,19,20,21,22],"Real-time WCAG AA and AAA contrast checking","Support for hex, RGB, and HSL color formats","Interactive color picker for both foreground and background","Live text preview at normal and large sizes","Clear pass\u002Ffail indicators for each WCAG level","Save and share color combinations","Multiple typeface options for preview",[24,25,26,27,28],"Free to use with no account required","Instant real-time results","Simple and intuitive interface","Supports all WCAG contrast levels","No ads or distractions",[30,31,32,33],"No API for programmatic access","Limited to two-color comparison only","No color blindness simulation","Basic tool without advanced analysis features","Best for designers and developers who need a quick, no-fuss WCAG color contrast checker for accessible design","cd62a457-6e63-4e31-b000-531d3eb836ab.webp","free",[38],"Web",{"free":3},0,[42],{"name":43,"slug":44,"sub_categories":45},"Colors & Palettes","colors-palettes",[],[47,50,53,55],{"name":48,"slug":49},"Colors","colors",{"name":51,"slug":52},"Accessibility","accessibility",{"name":54,"slug":36},"Free",{"name":56,"slug":57},"Dark Mode","dark-mode",[59,91,101,111],{"id":60,"url":61,"icon":9,"name":62,"slug":63,"tags":64,"cover":87,"tagline":88,"is_featured":89,"date_created":90,"date_updated":9},858,"https:\u002F\u002Fwww.genspark.ai\u002F","Genspark Design","genspark-design",[65,68,70,73,75,77,79,81,83,85],{"seo":9,"name":66,"slug":67},"AI Powered","ai-powered",{"seo":9,"name":9,"slug":69},"ai",{"seo":9,"name":71,"slug":72},"Freemium","freemium",{"seo":9,"name":9,"slug":74},"free-trial",{"seo":9,"name":9,"slug":76},"image-editing",{"seo":9,"name":9,"slug":78},"video",{"seo":9,"name":9,"slug":80},"animation",{"seo":9,"name":9,"slug":82},"prototyping",{"seo":9,"name":9,"slug":84},"no-code",{"seo":9,"name":9,"slug":86},"productivity","fc3931e4-3210-4155-a94b-da3a261fe281.webp","The next-gen AI for design — powered by Claude Opus 4.7",false,"2026-06-28T03:12:01.911314+00:00",{"id":92,"url":93,"icon":9,"name":94,"slug":95,"tags":96,"cover":98,"tagline":99,"is_featured":89,"date_created":100,"date_updated":9},857,"https:\u002F\u002Folivia-tsui.github.io\u002Fct\u002F","World's Best Scale Tool","worlds-best-scale-tool",[97],{"seo":9,"name":9,"slug":49},"eb5afb81-91ac-496d-96b6-bd870afbc2a8.webp","Advanced color scale and palette generation tool","2026-06-24T04:31:04.697212+00:00",{"id":102,"url":103,"icon":9,"name":104,"slug":105,"tags":106,"cover":108,"tagline":109,"is_featured":89,"date_created":110,"date_updated":9},856,"https:\u002F\u002Fwww.tints.dev\u002F","Tailwind CSS Color Generator","tailwind-css-color-generator",[107],{"seo":9,"name":9,"slug":49},"bd6eba7c-091e-4cfa-83c6-a7f3392e1032.webp","Tailwind CSS 11-color palette generator and API","2026-06-24T04:30:57.92162+00:00",{"id":112,"url":113,"icon":9,"name":114,"slug":115,"tags":116,"cover":120,"tagline":121,"is_featured":89,"date_created":122,"date_updated":9},855,"https:\u002F\u002Fscreensiz.es\u002F","Screensiz.es","screensiz-es",[117,118],{"seo":9,"name":54,"slug":36},{"seo":9,"name":9,"slug":119},"inspiration","b56672d4-1eab-4481-a3f5-4440977fb881.webp","Device screen sizes and viewport reference","2026-06-24T04:30:50.994519+00:00",[124,130,131,132,138,144,150],{"url":125,"name":126,"slug":127,"cover":128,"tagline":129},"https:\u002F\u002Fatmos.style","Atmos","atmos-color","9b5710cd-372d-46e9-997f-76a6df7e01d6.webp","Suite of online color tools for UI designers",{"url":103,"name":104,"slug":105,"cover":108,"tagline":109},{"url":93,"name":94,"slug":95,"cover":98,"tagline":99},{"url":133,"name":134,"slug":135,"cover":136,"tagline":137},"https:\u002F\u002Fpixelover.io","Pixelover","pixelover","db4709c5-3246-4f7e-ab89-1057c960c83f.webp","Online color picker and image overlay tool",{"url":139,"name":140,"slug":141,"cover":142,"tagline":143},"https:\u002F\u002Fnordhealth.design\u002Fcolor-generator","Nord Color Generator","nord-color-generator","a9afbd72-8a27-453f-820c-c6e171ea0908.webp","UI color palette generator based on Nord design system",{"url":145,"name":146,"slug":147,"cover":148,"tagline":149},"https:\u002F\u002Fcsshero.org\u002Fmesher","CSS Hero Mesher","css-hero-mesher","c8e938c6-095b-4b0f-b2b4-e24a18bec17d.webp","Create beautiful mesh gradient backgrounds with CSS",{"url":151,"name":152,"slug":153,"cover":154,"tagline":155},"https:\u002F\u002Folivia-tsui.github.io\u002Fct","Color Scale Tool","color-scale-tool","961aa9d6-73c4-4634-9060-b26dd258a61b.webp","Generate light and dark color scales interactively",[157,169,172],{"url":158,"icon":9,"name":159,"slug":160,"tags":161,"cover":166,"tagline":167,"is_featured":3,"date_created":168,"date_updated":9},"https:\u002F\u002Fcolorhunt.co","Color Hunt","color-hunt",[162,163,164],{"seo":9,"name":9,"slug":49},{"seo":9,"name":54,"slug":36},{"seo":9,"name":9,"slug":165},"gradient","e4a2e456-fabc-4bbf-8729-ecaf1cbfcbb6.webp","A curated collection of beautiful color palettes for designers and artists","2026-06-16T07:14:22.345664+00:00",{"url":93,"icon":9,"name":94,"slug":95,"tags":170,"cover":98,"tagline":99,"is_featured":89,"date_created":100,"date_updated":9},[171],{"seo":9,"name":9,"slug":49},{"url":103,"icon":9,"name":104,"slug":105,"tags":173,"cover":108,"tagline":109,"is_featured":89,"date_created":110,"date_updated":9},[174],{"seo":9,"name":9,"slug":49}]