{"id":29,"date":"2026-09-30T16:59:37","date_gmt":"2026-09-30T16:59:37","guid":{"rendered":"https:\/\/benjaminolsen.dev\/?page_id=29"},"modified":"2026-09-30T19:12:43","modified_gmt":"2026-09-30T19:12:43","slug":"contrast-checker","status":"publish","type":"page","link":"https:\/\/benjaminolsen.dev\/index.php\/contrast-checker\/","title":{"rendered":"Color Contrast Checker"},"content":{"rendered":"<div class=\"oxy-container-29-126 oxy-container bo-page\"><header class=\"oxy-container-29-105 oxy-container bo-header\"><a class=\"oxy-text-link-29-100 oxy-text-link bo-brand\" href=\"\/\" target=\"_self\">\nBenjamin Olsen\n<\/a><nav class=\"oxy-container-29-104 oxy-container bo-nav\" aria-label=\"Main navigation\"><a class=\"oxy-text-link-29-101 oxy-text-link bo-nav-link\" href=\"https:\/\/benjaminolsen.dev\/index.php\/tools\/\" target=\"_self\">\nTools\n<\/a><a class=\"oxy-text-link-29-102 oxy-text-link bo-nav-link\" href=\"https:\/\/benjaminolsen.dev\/index.php\/guides\/\" target=\"_self\">\nLearn\n<\/a><a class=\"oxy-text-link-29-103 oxy-text-link bo-nav-link\" href=\"https:\/\/benjaminolsen.dev\/index.php\/about\/\" target=\"_self\">\nAbout\n<\/a><\/nav><\/header><main class=\"oxy-container-29-122 oxy-container bo-main\"><section class=\"oxy-container-29-109 oxy-container bo-page-head\"><a class=\"oxy-text-link-29-106 oxy-text-link bo-link\" href=\"https:\/\/benjaminolsen.dev\/index.php\/tools\/\" target=\"_self\">\nAll tools\n<\/a><h1 class=\"oxy-text-29-107 oxy-text bo-page-title\">\nColor Contrast Checker\n<\/h1><p class=\"oxy-text-29-108 oxy-text bo-intro\">\nCompare solid foreground and background colors. Check text contrast before you use them in your design.\n<\/p><\/section><section class=\"oxy-container-29-121 oxy-container bo-workspace\" data-tool=\"contrast\" aria-label=\"Color Contrast Checker\"><div class=\"oxy-container-29-114 oxy-container bo-form\"><div class=\"oxy-container-29-112 oxy-container bo-fields\"><label class=\"oxy-text-29-110 oxy-text bo-field\" for=\"bo-fg\">\nText color (hex)<input class=\"bo-input\" id=\"bo-fg\" data-key=\"fg\" type=\"text\" value=\"#f7f7f3\" step=\"any\">\n<\/label><label class=\"oxy-text-29-111 oxy-text bo-field\" for=\"bo-bg\">\nBackground color (hex)<input class=\"bo-input\" id=\"bo-bg\" data-key=\"bg\" type=\"text\" value=\"#111415\" step=\"any\">\n<\/label><\/div><p class=\"oxy-text-29-113 oxy-text bo-note\">\nChecks solid, opaque sRGB colors. AA thresholds are 4.5:1 for normal text and 3:1 for large text; AAA uses 7:1 and 4.5:1. Large text is at least 24px, or about 18.67px when bold. A passing ratio alone does not establish full accessibility.\n<\/p><\/div><div class=\"oxy-container-29-120 oxy-container bo-result\"><p class=\"oxy-text-29-115 oxy-text bo-eyebrow\">\nYour result\n<\/p><pre class=\"oxy-text-29-116 oxy-text bo-code\" data-result=\"code\" aria-live=\"polite\">\n\n<\/pre><button class=\"oxy-text-link-29-117 oxy-text-link bo-button\" target=\"_self\" type=\"button\" data-action=\"copy\">\nCopy result\n<\/button><p class=\"oxy-text-29-118 oxy-text bo-status\" data-result=\"status\" role=\"status\">\n\n<\/p><div class=\"oxy-text-29-119 oxy-text bo-preview\" data-result=\"preview\">\nType that adapts.\n<\/div><\/div><\/section><\/main><footer class=\"oxy-container-29-125 oxy-container bo-footer\"><p class=\"oxy-text-29-123 oxy-text\">\nBenjamin Olsen \u00b7 Useful tools. Practical guides.\n<\/p><a class=\"oxy-text-link-29-124 oxy-text-link bo-nav-link\" href=\"https:\/\/benjaminolsen.dev\/index.php\/guides\/\" target=\"_self\">\nExplore topics\n<\/a><\/footer><\/div>","protected":false},"excerpt":{"rendered":"<p>Benjamin Olsen Tools Learn About All tools Color Contrast Checker Compare solid foreground and background colors. Check text contrast before you use them in your design. Text color (hex) Background color (hex) Checks solid, opaque sRGB colors. AA thresholds are 4.5:1 for normal text and 3:1 for large text; AAA uses 7:1 and 4.5:1. Large [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_oxygen_hide_in_design_set":false,"_oxygen_tags":"","footnotes":""},"class_list":["post-29","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Text Color Contrast Checker | Benjamin Olsen<\/title>\n<meta name=\"description\" content=\"Compare solid foreground and background hex colors. Calculate WCAG text contrast ratios and check normal and large text AA\/AAA thresholds.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/benjaminolsen.dev\/index.php\/contrast-checker\/\" \/>\n<meta property=\"og:locale\" content=\"da_DK\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Text Color Contrast Checker | Benjamin Olsen\" \/>\n<meta property=\"og:description\" content=\"Compare solid foreground and background hex colors. Calculate WCAG text contrast ratios and check normal and large text AA\/AAA thresholds.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/benjaminolsen.dev\/index.php\/contrast-checker\/\" \/>\n<meta property=\"og:site_name\" content=\"Benjamin Olsen\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-30T19:12:43+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/benjaminolsen.dev\\\/index.php\\\/contrast-checker\\\/\",\"url\":\"https:\\\/\\\/benjaminolsen.dev\\\/index.php\\\/contrast-checker\\\/\",\"name\":\"Text Color Contrast Checker | Benjamin Olsen\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/benjaminolsen.dev\\\/#website\"},\"datePublished\":\"2026-09-30T16:59:37+00:00\",\"dateModified\":\"2026-09-30T19:12:43+00:00\",\"description\":\"Compare solid foreground and background hex colors. Calculate WCAG text contrast ratios and check normal and large text AA\\\/AAA thresholds.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/benjaminolsen.dev\\\/index.php\\\/contrast-checker\\\/#breadcrumb\"},\"inLanguage\":\"da-DK\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/benjaminolsen.dev\\\/index.php\\\/contrast-checker\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/benjaminolsen.dev\\\/index.php\\\/contrast-checker\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/benjaminolsen.dev\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Color Contrast Checker\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/benjaminolsen.dev\\\/#website\",\"url\":\"https:\\\/\\\/benjaminolsen.dev\\\/\",\"name\":\"Benjamin Olsen\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/benjaminolsen.dev\\\/#\\\/schema\\\/person\\\/aee4e89bcb6704d860babf7ba16a0b8d\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/benjaminolsen.dev\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"da-DK\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/benjaminolsen.dev\\\/#\\\/schema\\\/person\\\/aee4e89bcb6704d860babf7ba16a0b8d\",\"name\":\"Benjamin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"da-DK\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/fda08b9a3a73cd1a57fc39c2a767fb6441b2dbf176857221a8da88161187eeb1?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/fda08b9a3a73cd1a57fc39c2a767fb6441b2dbf176857221a8da88161187eeb1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/fda08b9a3a73cd1a57fc39c2a767fb6441b2dbf176857221a8da88161187eeb1?s=96&d=mm&r=g\",\"caption\":\"Benjamin\"},\"logo\":{\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/fda08b9a3a73cd1a57fc39c2a767fb6441b2dbf176857221a8da88161187eeb1?s=96&d=mm&r=g\"},\"sameAs\":[\"http:\\\/\\\/benjaminolsen.dev\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Text Color Contrast Checker | Benjamin Olsen","description":"Compare solid foreground and background hex colors. Calculate WCAG text contrast ratios and check normal and large text AA\/AAA thresholds.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/benjaminolsen.dev\/index.php\/contrast-checker\/","og_locale":"da_DK","og_type":"article","og_title":"Text Color Contrast Checker | Benjamin Olsen","og_description":"Compare solid foreground and background hex colors. Calculate WCAG text contrast ratios and check normal and large text AA\/AAA thresholds.","og_url":"https:\/\/benjaminolsen.dev\/index.php\/contrast-checker\/","og_site_name":"Benjamin Olsen","article_modified_time":"2026-09-30T19:12:43+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/benjaminolsen.dev\/index.php\/contrast-checker\/","url":"https:\/\/benjaminolsen.dev\/index.php\/contrast-checker\/","name":"Text Color Contrast Checker | Benjamin Olsen","isPartOf":{"@id":"https:\/\/benjaminolsen.dev\/#website"},"datePublished":"2026-09-30T16:59:37+00:00","dateModified":"2026-09-30T19:12:43+00:00","description":"Compare solid foreground and background hex colors. Calculate WCAG text contrast ratios and check normal and large text AA\/AAA thresholds.","breadcrumb":{"@id":"https:\/\/benjaminolsen.dev\/index.php\/contrast-checker\/#breadcrumb"},"inLanguage":"da-DK","potentialAction":[{"@type":"ReadAction","target":["https:\/\/benjaminolsen.dev\/index.php\/contrast-checker\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/benjaminolsen.dev\/index.php\/contrast-checker\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/benjaminolsen.dev\/"},{"@type":"ListItem","position":2,"name":"Color Contrast Checker"}]},{"@type":"WebSite","@id":"https:\/\/benjaminolsen.dev\/#website","url":"https:\/\/benjaminolsen.dev\/","name":"Benjamin Olsen","description":"","publisher":{"@id":"https:\/\/benjaminolsen.dev\/#\/schema\/person\/aee4e89bcb6704d860babf7ba16a0b8d"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/benjaminolsen.dev\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"da-DK"},{"@type":["Person","Organization"],"@id":"https:\/\/benjaminolsen.dev\/#\/schema\/person\/aee4e89bcb6704d860babf7ba16a0b8d","name":"Benjamin","image":{"@type":"ImageObject","inLanguage":"da-DK","@id":"https:\/\/secure.gravatar.com\/avatar\/fda08b9a3a73cd1a57fc39c2a767fb6441b2dbf176857221a8da88161187eeb1?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/fda08b9a3a73cd1a57fc39c2a767fb6441b2dbf176857221a8da88161187eeb1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/fda08b9a3a73cd1a57fc39c2a767fb6441b2dbf176857221a8da88161187eeb1?s=96&d=mm&r=g","caption":"Benjamin"},"logo":{"@id":"https:\/\/secure.gravatar.com\/avatar\/fda08b9a3a73cd1a57fc39c2a767fb6441b2dbf176857221a8da88161187eeb1?s=96&d=mm&r=g"},"sameAs":["http:\/\/benjaminolsen.dev"]}]}},"_links":{"self":[{"href":"https:\/\/benjaminolsen.dev\/index.php\/wp-json\/wp\/v2\/pages\/29","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/benjaminolsen.dev\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/benjaminolsen.dev\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/benjaminolsen.dev\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/benjaminolsen.dev\/index.php\/wp-json\/wp\/v2\/comments?post=29"}],"version-history":[{"count":4,"href":"https:\/\/benjaminolsen.dev\/index.php\/wp-json\/wp\/v2\/pages\/29\/revisions"}],"predecessor-version":[{"id":620,"href":"https:\/\/benjaminolsen.dev\/index.php\/wp-json\/wp\/v2\/pages\/29\/revisions\/620"}],"wp:attachment":[{"href":"https:\/\/benjaminolsen.dev\/index.php\/wp-json\/wp\/v2\/media?parent=29"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}