{"id":442,"date":"2026-11-04T06:17:42","date_gmt":"2026-11-03T19:17:42","guid":{"rendered":"https:\/\/uxrobot.ai\/ux-audits\/?post_type=guide&#038;p=442"},"modified":"2026-11-04T06:17:42","modified_gmt":"2026-11-03T19:17:42","slug":"bad-color-contrast-examples","status":"publish","type":"guide","link":"https:\/\/uxrobot.ai\/ux-audits\/guides\/bad-color-contrast-examples\/","title":{"rendered":"Bad color contrast examples and how to fix each one"},"content":{"rendered":"\n<p class=\"has-lead-font-size wp-block-paragraph\">Light gray text that looks elegant in a design file. A brand green that is lovely on a logo and hard to read on a button. A form whose fields almost vanish into the page. These are the bad color contrast examples we find again and again, and every one of them makes a website harder to use for real people.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This guide shows the most common ones side by side with their fixes, each with the contrast ratio it measures and the minimum it needs. Several come from a real UX Robot audit of the Happy Menu website, published with its owner\u2019s permission, so you can see what poor color contrast looks like on a live page and how it was measured. You will also learn how to check your own pages in a few minutes and how to fix contrast without giving up your brand.<\/p>\n\n\n\n<div class=\"uxa-gd-takeaways\">\n    <p class=\"uxa-kicker\">In short<\/p>\n    <ul>\n        <li>Contrast is a number, not a matter of taste: the ratio between two colors\u2019 brightness, from 1:1 to 21:1.<\/li>\n        <li>Body text needs at least 4.5:1 against its background, large text 3:1, and the edges of buttons, fields, icons and focus outlines 3:1.<\/li>\n        <li>Low contrast text is the most common accessibility failure on the web, found on 83.9% of the top million home pages in 2026.<\/li>\n        <li>The usual culprits are light gray text, bright brand colors used for small text or button labels, faint field borders, links shown only by color and weak focus outlines.<\/li>\n        <li>You rarely need a new brand. A darker shade of the same color for text, and dark text on bright backgrounds, fixes most problems.<\/li>\n    <\/ul>\n<\/div>\n\n\n\n<nav class=\"uxa-gd-toc\" aria-label=\"In this guide\" data-uxa-toc><p class=\"uxa-kicker\">In this guide<\/p><ol><li><a href=\"#what-is-bad-color-contrast\">What counts as bad color contrast?<\/a><\/li><li><a href=\"#why-poor-color-contrast-matters\">Why poor color contrast costs you customers<\/a><\/li><li><a href=\"#bad-color-contrast-examples\">Nine bad color contrast examples and how to fix them<\/a><\/li><li><a href=\"#how-to-check-color-contrast\">How to check color contrast in ten minutes<\/a><\/li><li><a href=\"#fix-contrast-keep-your-brand\">How to fix poor color contrast without losing your brand<\/a><\/li><li><a href=\"#color-and-contrast-checklist\">A color and contrast checklist<\/a><\/li><li><a href=\"#color-contrast-faq\">Color contrast questions people ask<\/a><\/li><\/ol><\/nav>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-is-bad-color-contrast\">What counts as bad color contrast?<\/h2>\n\n\n\n<p class=\"uxa-gd-answer wp-block-paragraph\">Color contrast is bad when text, or a part of the interface people need to see, is too close in brightness to the color behind it. Under WCAG 2.2 at level AA, normal text needs a contrast ratio of at least 4.5:1, large text at least 3:1, and buttons, form fields, icons and focus outlines at least 3:1 against the colors next to them. Anything below that is poor color contrast.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The contrast ratio compares how light two colors are, not which hues they are. Black on white is the maximum, 21:1. The same color on itself is 1:1. Because it is about lightness, two colors can look completely different, such as red and green, and still have almost no contrast between them. That is also why a color that feels bold and saturated, like a bright orange or a fresh green, often fails when you put white text on it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The <a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/contrast-minimum.html\">W3C\u2019s explanation of the minimum contrast rule<\/a> sets out what \u201clarge\u201d means: 18 point text, or 14 point bold, which it puts at about 24 pixels, or about 18.5 pixels bold, on a web page. A separate rule for <a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/non-text-contrast.html\">non-text contrast<\/a> covers what people need to see to use the page: the edge of a form field, an icon that is the only label on a button, a checkbox, a chart line and the outline that shows where the keyboard is.<\/p>\n\n\n\n<div class=\"uxa-sc-board-wrap\">\n    <span class=\"uxa-kicker\">The minimum contrast for each element (WCAG 2.2, level AA)<\/span>\n    <table class=\"uxa-sc-board\">\n        <thead>\n            <tr><th scope=\"col\">Element<\/th><th scope=\"col\">Minimum ratio<\/th><th scope=\"col\">Examples<\/th><\/tr>\n        <\/thead>\n        <tbody>\n            <tr><th scope=\"row\">Normal text<\/th><td>4.5:1<\/td><td>Body copy, labels, links, button text under about 24 pixels (18.5 pixels bold), hint text inside fields that people need to read.<\/td><\/tr>\n            <tr><th scope=\"row\">Large text<\/th><td>3:1<\/td><td>Headlines and button labels of at least 24 pixels, or about 18.5 pixels bold.<\/td><\/tr>\n            <tr><th scope=\"row\">Interface parts<\/th><td>3:1<\/td><td>Field borders, checkboxes, toggles, icon-only buttons and the keyboard focus outline, against the colors next to them.<\/td><\/tr>\n            <tr><th scope=\"row\">Charts and graphics<\/th><td>3:1<\/td><td>Lines, bars and map areas that people need to understand the information.<\/td><\/tr>\n            <tr><th scope=\"row\">No requirement<\/th><td>None<\/td><td>Logos and brand names, disabled controls, pure decoration and text that happens to appear in a photo.<\/td><\/tr>\n        <\/tbody>\n    <\/table>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">There is also a stricter level, AAA, which asks for 7:1 for normal text and 4.5:1 for large text. Most websites aim for AA, the level that most accessibility laws and contracts point to, and use AAA for long reading such as articles and documentation where they can.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"why-poor-color-contrast-matters\">Why poor color contrast costs you customers<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Low contrast is the single most common accessibility problem on the web, and it is getting more common, not less. Every year WebAIM tests the home pages of the top million websites, and its 2026 report found:<\/p>\n\n\n\n<div class=\"uxa-sc-stats\" aria-label=\"How common low contrast text is\">\n    <div class=\"uxa-sc-stats__item\">\n        <span class=\"uxa-sc-stats__number\" data-uxa-count=\"83.9\" data-uxa-suffix=\"%\">83.9%<\/span>\n        <span class=\"uxa-sc-stats__label\">Of the top million home pages had low contrast text below the WCAG AA thresholds (WebAIM, 2026).<\/span>\n    <\/div>\n    <div class=\"uxa-sc-stats__item\">\n        <span class=\"uxa-sc-stats__number\" data-uxa-count=\"34\">34<\/span>\n        <span class=\"uxa-sc-stats__label\">Separate pieces of low contrast text on the average home page, up 15% from 2025 (WebAIM, 2026).<\/span>\n    <\/div>\n    <div class=\"uxa-sc-stats__item\">\n        <span class=\"uxa-sc-stats__number\" data-uxa-count=\"96\" data-uxa-suffix=\"%\">96%<\/span>\n        <span class=\"uxa-sc-stats__label\">Of all the errors WebAIM detected fell into six types, with low contrast text the most common (WebAIM, 2026).<\/span>\n    <\/div>\n    <div class=\"uxa-sc-stats__item\">\n        <span class=\"uxa-sc-stats__number\" data-uxa-count=\"2.84\" data-uxa-suffix=\":1\">2.84:1<\/span>\n        <span class=\"uxa-sc-stats__label\">The contrast UX Robot measured for Happy Menu\u2019s brand green on white in October 2026, where small text needs 4.5:1.<\/span>\n    <\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">The share of home pages with low contrast text had been slowly falling for years, then jumped back up in 2026:<\/p>\n\n\n\n<figure class=\"uxa-gd-chart\">\n    <span class=\"uxa-kicker\">Home pages with low contrast text, by year<\/span>\n    <ul class=\"uxa-sc-bars\" aria-label=\"Share of the top million home pages with low contrast text, 2019 to 2026\">\n        <li><span class=\"uxa-sc-bars__label\">2019<\/span><span class=\"uxa-sc-bars__value\">85.3%<\/span><span class=\"uxa-sc-bars__track\"><span class=\"uxa-sc-bars__fill is-hatched\" style=\"--uxa-target:85.3%\"><\/span><\/span><\/li>\n        <li><span class=\"uxa-sc-bars__label\">2020<\/span><span class=\"uxa-sc-bars__value\">86.3%<\/span><span class=\"uxa-sc-bars__track\"><span class=\"uxa-sc-bars__fill is-hatched\" style=\"--uxa-target:86.3%\"><\/span><\/span><\/li>\n        <li><span class=\"uxa-sc-bars__label\">2021<\/span><span class=\"uxa-sc-bars__value\">86.4%<\/span><span class=\"uxa-sc-bars__track\"><span class=\"uxa-sc-bars__fill is-hatched\" style=\"--uxa-target:86.4%\"><\/span><\/span><\/li>\n        <li><span class=\"uxa-sc-bars__label\">2022<\/span><span class=\"uxa-sc-bars__value\">83.9%<\/span><span class=\"uxa-sc-bars__track\"><span class=\"uxa-sc-bars__fill is-hatched\" style=\"--uxa-target:83.9%\"><\/span><\/span><\/li>\n        <li><span class=\"uxa-sc-bars__label\">2023<\/span><span class=\"uxa-sc-bars__value\">83.6%<\/span><span class=\"uxa-sc-bars__track\"><span class=\"uxa-sc-bars__fill is-hatched\" style=\"--uxa-target:83.6%\"><\/span><\/span><\/li>\n        <li><span class=\"uxa-sc-bars__label\">2024<\/span><span class=\"uxa-sc-bars__value\">81%<\/span><span class=\"uxa-sc-bars__track\"><span class=\"uxa-sc-bars__fill is-hatched\" style=\"--uxa-target:81%\"><\/span><\/span><\/li>\n        <li><span class=\"uxa-sc-bars__label\">2025<\/span><span class=\"uxa-sc-bars__value\">79.1%<\/span><span class=\"uxa-sc-bars__track\"><span class=\"uxa-sc-bars__fill is-hatched\" style=\"--uxa-target:79.1%\"><\/span><\/span><\/li>\n        <li><span class=\"uxa-sc-bars__label\">2026<\/span><span class=\"uxa-sc-bars__value\">83.9%<\/span><span class=\"uxa-sc-bars__track\"><span class=\"uxa-sc-bars__fill\" style=\"--uxa-target:83.9%\"><\/span><\/span><\/li>\n    <\/ul>\n    <figcaption>Share of the top million home pages with text below the WCAG AA contrast thresholds, from WebAIM\u2019s yearly tests. The 2026 tests ran in February 2026.<\/figcaption>\n<\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Who struggles with it? The W3C wrote the rule for people with moderately low vision or weaker contrast perception, and it chose 4.5:1 to make up for the contrast loss that comes with vision of about 20\/40, which it notes is typical at around age 80. People with color vision deficiency see some colors as closer together than you do, and the <a href=\"https:\/\/www.nei.nih.gov\/learn-about-eye-health\/eye-conditions-and-diseases\/color-blindness\">National Eye Institute<\/a> notes that men have a much higher risk of it than women. Then there is everyone else: anyone reading a phone in sunlight, on a cheap screen turned down to save battery, or late at night with tired eyes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For the business, the risk is easy to picture. Text that is hard to read is easy to skip. A button whose label you have to squint at asks more of people at the very moment you want them to act. A form field you cannot see is a form that is easier to get wrong. None of this shows up as an error in your analytics, which is why it so often goes unnoticed.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"bad-color-contrast-examples\">Nine bad color contrast examples and how to fix them<\/h2>\n\n\n\n<p class=\"uxa-gd-answer wp-block-paragraph\">The most common bad color contrast examples are light gray body text, brand colors used for small text, white text on bright buttons, faint hint text in fields, field borders that almost disappear, links shown only by color, weak focus outlines, red and green as the only signal, and text placed over photos. Each one has a simple fix.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here are six of them side by side with a fix. Every ratio is calculated with the WCAG formula; the bad pair is on the left and a passing pair on the right.<\/p>\n\n\n\n<figure class=\"uxa-gd-chart\">\n    <span class=\"uxa-kicker\">Bad color contrast examples, before and after<\/span>\n    <svg viewBox=\"0 0 640 410\" role=\"img\" aria-labelledby=\"uxa-contrast-pairs-title\">\n        <title id=\"uxa-contrast-pairs-title\">Six color pairs before and after a fix: gray text 2.85:1 to 7:1, green text 2.84:1 to 5.39:1, white on green 2.84:1 to 5.39:1, white on orange 2.14:1 to black on orange 9.81:1, light hint text 2.32:1 to 4.54:1, and a field border 1.16:1 to 3.45:1<\/title>\n        <text x=\"190\" y=\"18\" class=\"is-strong\">Bad<\/text>\n        <text x=\"420\" y=\"18\" class=\"is-strong\">Fixed<\/text>\n        <line x1=\"0\" y1=\"30\" x2=\"640\" y2=\"30\" class=\"uxa-gd-axis\"><\/line>\n\n        <text x=\"0\" y=\"66\" class=\"is-strong\">Gray text on white<\/text>\n        <rect x=\"190\" y=\"44\" width=\"140\" height=\"40\" rx=\"10\" style=\"fill:#ffffff;stroke:#e5e5e5\"><\/rect>\n        <text x=\"204\" y=\"69\" style=\"fill:#999999;font-size:14px\">Read the terms<\/text>\n        <text x=\"340\" y=\"69\">2.85:1<\/text>\n        <rect x=\"420\" y=\"44\" width=\"140\" height=\"40\" rx=\"10\" style=\"fill:#ffffff;stroke:#e5e5e5\"><\/rect>\n        <text x=\"434\" y=\"69\" style=\"fill:#595959;font-size:14px\">Read the terms<\/text>\n        <text x=\"570\" y=\"69\">7.00:1<\/text>\n\n        <text x=\"0\" y=\"126\" class=\"is-strong\">Green text on white<\/text>\n        <rect x=\"190\" y=\"104\" width=\"140\" height=\"40\" rx=\"10\" style=\"fill:#ffffff;stroke:#e5e5e5\"><\/rect>\n        <text x=\"204\" y=\"129\" style=\"fill:#00af74;font-size:14px\">See Premium<\/text>\n        <text x=\"340\" y=\"129\">2.84:1<\/text>\n        <rect x=\"420\" y=\"104\" width=\"140\" height=\"40\" rx=\"10\" style=\"fill:#ffffff;stroke:#e5e5e5\"><\/rect>\n        <text x=\"434\" y=\"129\" style=\"fill:#007a50;font-size:14px\">See Premium<\/text>\n        <text x=\"570\" y=\"129\">5.39:1<\/text>\n\n        <text x=\"0\" y=\"186\" class=\"is-strong\">White on bright green<\/text>\n        <rect x=\"190\" y=\"164\" width=\"140\" height=\"40\" rx=\"10\" style=\"fill:#00af74\"><\/rect>\n        <text x=\"204\" y=\"189\" style=\"fill:#ffffff;font-size:14px;font-weight:600\">Get started<\/text>\n        <text x=\"340\" y=\"189\">2.84:1<\/text>\n        <rect x=\"420\" y=\"164\" width=\"140\" height=\"40\" rx=\"10\" style=\"fill:#007a50\"><\/rect>\n        <text x=\"434\" y=\"189\" style=\"fill:#ffffff;font-size:14px;font-weight:600\">Get started<\/text>\n        <text x=\"570\" y=\"189\">5.39:1<\/text>\n\n        <text x=\"0\" y=\"246\" class=\"is-strong\">White on orange<\/text>\n        <rect x=\"190\" y=\"224\" width=\"140\" height=\"40\" rx=\"10\" style=\"fill:#ff9900\"><\/rect>\n        <text x=\"204\" y=\"249\" style=\"fill:#ffffff;font-size:14px;font-weight:600\">Add to cart<\/text>\n        <text x=\"340\" y=\"249\">2.14:1<\/text>\n        <rect x=\"420\" y=\"224\" width=\"140\" height=\"40\" rx=\"10\" style=\"fill:#ff9900\"><\/rect>\n        <text x=\"434\" y=\"249\" style=\"fill:#000000;font-size:14px;font-weight:600\">Add to cart<\/text>\n        <text x=\"570\" y=\"249\">9.81:1<\/text>\n\n        <text x=\"0\" y=\"306\" class=\"is-strong\">Hint text in a field<\/text>\n        <rect x=\"190\" y=\"284\" width=\"140\" height=\"40\" rx=\"10\" style=\"fill:#ffffff;stroke:#8a8a8a\"><\/rect>\n        <text x=\"204\" y=\"309\" style=\"fill:#aaaaaa;font-size:14px\">name@email.com<\/text>\n        <text x=\"340\" y=\"309\">2.32:1<\/text>\n        <rect x=\"420\" y=\"284\" width=\"140\" height=\"40\" rx=\"10\" style=\"fill:#ffffff;stroke:#8a8a8a\"><\/rect>\n        <text x=\"434\" y=\"309\" style=\"fill:#767676;font-size:14px\">name@email.com<\/text>\n        <text x=\"570\" y=\"309\">4.54:1<\/text>\n\n        <text x=\"0\" y=\"366\" class=\"is-strong\">Field border<\/text>\n        <rect x=\"190\" y=\"344\" width=\"140\" height=\"40\" rx=\"10\" style=\"fill:#ffffff;stroke:#eeeeee;stroke-width:2\"><\/rect>\n        <text x=\"340\" y=\"369\">1.16:1<\/text>\n        <rect x=\"420\" y=\"344\" width=\"140\" height=\"40\" rx=\"10\" style=\"fill:#ffffff;stroke:#8a8a8a;stroke-width:2\"><\/rect>\n        <text x=\"570\" y=\"369\">3.45:1<\/text>\n    <\/svg>\n    <figcaption>Gray #999999 to #595959, green #00AF74 to #007A50, orange #FF9900 kept with black text, hint text #AAAAAA to #767676, and border #EEEEEE to #8A8A8A, all on white. The green and the border are the values UX Robot measured on Happy Menu.<\/figcaption>\n<\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">1. Light gray text on white<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The classic. A mid gray such as #999999 looks calm and modern in a mockup, and measures 2.85:1 on white, far below the 4.5:1 that body text needs. It turns up in captions, dates, footers, small print and the \u201csecondary\u201d text in a design system. The fix is a darker gray: #767676 is about the lightest gray that passes on pure white, at 4.54:1, and #595959 gives a comfortable 7:1. If your design looks too heavy with darker gray, make the text smaller in weight or size rather than lighter in color.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. A brand color used for small text<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Brand colors are chosen for logos, which have no contrast requirement, and then spread to labels, links and small headings, which do. In UX Robot\u2019s audit of the Happy Menu home page on a phone in October 2026, the brand green #00AF74 measured 2.84:1 on white. It was used for the small eyebrow label above the headline, the step numbers, the ticks in a list of benefits and the footer headings, all text that needs 4.5:1. The fix keeps the brand: use a darker shade of the same green, such as #007A50 at 5.39:1, for text, and keep the bright green for large shapes and illustrations.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. White text on a bright button<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The same green carried the main button, Get Listed Free, with white bold text at 20 pixels. Bold text that size counts as large, so it needs only 3:1, and it still fell short: the audit measured 2.84:1. Bright orange is another frequent offender: white on #FF9900 is only 2.14:1. There are two fixes. Darken the button until white text passes, or keep the bright color and switch the label to black or dark ink, which on that orange gives 9.81:1. Either way, check the hover and pressed colors too, since they often get lighter.<\/p>\n\n\n\n<div class=\"uxa-sc-phones is-pair uxa-sc-reveal\">\n    <figure class=\"uxa-sc-phone\">\n        <div class=\"uxa-sc-phone__head\"><span class=\"uxa-kicker\">Brand green<\/span><span class=\"uxa-sc-tag is-basis\">Measured<\/span><\/div>\n        <img src=\"https:\/\/uxrobot.ai\/ux-audits\/wp-content\/uploads\/2026\/11\/guide-bad-color-contrast-examples-happy-menu-contrast-marked.jpg\" width=\"780\" height=\"1688\" loading=\"lazy\" decoding=\"async\" alt=\"Happy Menu\u2019s home page on a phone with the green eyebrow label, the green Get Listed Free button, the green menu icon and the green chat button marked with red boxes\">\n        <figcaption>The green label, the white text on the green button and the green menu and chat icons all measured 2.84:1.<\/figcaption>\n    <\/figure>\n    <figure class=\"uxa-sc-phone\">\n        <div class=\"uxa-sc-phone__head\"><span class=\"uxa-kicker\">Focus outline<\/span><span class=\"uxa-sc-tag is-basis\">Measured<\/span><\/div>\n        <img src=\"https:\/\/uxrobot.ai\/ux-audits\/wp-content\/uploads\/2026\/11\/guide-bad-color-contrast-examples-happy-menu-focus-ring-marked.jpg\" width=\"780\" height=\"1688\" loading=\"lazy\" decoding=\"async\" alt=\"Happy Menu\u2019s footer on a phone with the Add your restaurant link in keyboard focus, shown only by a pale outline and green text, marked with a red box\">\n        <figcaption>With keyboard focus, Add your restaurant gets a pale outline of about 1.6:1. Can you tell it is the focused link?<\/figcaption>\n    <\/figure>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">4. Faint hint text inside form fields<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The example text inside an empty field, such as name@email.com, is usually a very light gray like #AAAAAA, which measures 2.32:1. If people need to read it to fill in the field, it is text and needs 4.5:1; #767676 passes. Better still, put any instruction people need in a visible line above or below the field, because hint text disappears the moment they start typing.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">5. Form fields whose borders vanish<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">When the only thing that shows where a field is happens to be its border, that border needs 3:1. On Happy Menu\u2019s menu editor, the screens restaurant owners use to build their menu, the Category Name and Description fields were drawn only by a 2 pixel #EEEEEE border on white: 1.16:1. On a bright screen the fields can look like empty space. A border of #8A8A8A gives 3.45:1, and a light fill inside the field makes it easier still to spot.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">6. Links shown only by color<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Under Happy Menu\u2019s sign-up button, the line \u201cBy creating an account, you agree to the Terms of Service and acknowledge the Privacy Policy\u201d showed both links in the brand green with no underline. The green measured 2.84:1 against the white page and only 1.65:1 against the gray sentence around it, so the links were hard to read and hard to tell apart from the text. The <a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/use-of-color.html\">use of color rule<\/a> says color must not be the only way information is shown. The simplest fix is the oldest one: underline links in text.<\/p>\n\n\n\n<div class=\"uxa-sc-screens uxa-sc-reveal\">\n    <figure class=\"uxa-sc-screen\">\n        <div class=\"uxa-sc-screen__head\"><span class=\"uxa-kicker\">Field borders<\/span><span class=\"uxa-sc-tag is-basis\">Measured<\/span><\/div>\n        <div class=\"uxa-sc-screen__window\"><img src=\"https:\/\/uxrobot.ai\/ux-audits\/wp-content\/uploads\/2026\/11\/guide-bad-color-contrast-examples-happy-menu-field-borders-marked.jpg\" width=\"1280\" height=\"800\" loading=\"lazy\" decoding=\"async\" alt=\"Happy Menu\u2019s Add a Category form with the very light Category Name and Description field borders marked with red boxes\"><\/div>\n        <figcaption>The Category Name and Description fields are outlined at 1.16:1, so they barely show against the white form.<\/figcaption>\n    <\/figure>\n    <figure class=\"uxa-sc-screen\">\n        <div class=\"uxa-sc-screen__head\"><span class=\"uxa-kicker\">Color-only links<\/span><span class=\"uxa-sc-tag is-basis\">Measured<\/span><\/div>\n        <div class=\"uxa-sc-screen__window\"><img src=\"https:\/\/uxrobot.ai\/ux-audits\/wp-content\/uploads\/2026\/11\/guide-bad-color-contrast-examples-happy-menu-legal-links-marked.jpg\" width=\"1280\" height=\"800\" loading=\"lazy\" decoding=\"async\" alt=\"The line under Happy Menu\u2019s sign-up button, By creating an account, you agree to the Terms of Service and acknowledge the Privacy Policy, with green links that have no underline, marked with a red box\"><\/div>\n        <figcaption>Terms of Service and Privacy Policy differ from the sentence around them only by a green that is hard to read.<\/figcaption>\n    <\/figure>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">7. A focus outline nobody can see<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">People who use a keyboard, rather than a mouse or touch, rely on the focus outline to know where they are on the page. Many designs remove the browser\u2019s outline and replace it with something subtler. On Happy Menu, a focused footer link got a green outline at 45% opacity, about 1.6:1 against white, and the language picker only a ring of about 1.3:1. Focused, the main Start Taking Orders Free button turned pale with a light blue ring of about 1.77:1. A focus outline needs 3:1 against the colors next to it. A solid 2 pixel outline in a dark color, with a little space between it and the element, works on almost any design.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">8. Red and green as the only signal<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Red for an error and green for success feels natural, but pure red and pure green are close in lightness, and people with the most common color vision deficiencies can find them hard to tell apart. Red text on a green background, for instance #FF0000 on #008000, measures just 1.28:1. Status badges, \u201cin stock\u201d labels, chart legends and form errors are the usual places. Keep the colors if you like them, but add a second signal: an icon, a word such as Error or In stock, or a pattern in a chart. Then make sure the text itself still meets 4.5:1.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">9. Text over photos and gradients<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">White headlines over a hero photo pass where the photo is dark and fail where it is bright, such as a sky or a white shirt. Because the background changes from pixel to pixel, there is no single ratio, and the W3C lists text over a background image without enough contrast as a known failure. Measure against the lightest part of the photo behind the text. The usual fixes are a dark overlay on the photo, a solid panel behind the text, or moving the text off the photo. Remember the photo will crop differently on a phone, so check both.<\/p>\n\n\n\n<aside class=\"uxa-check is-inline\" data-uxa-check=\"inline\"><p class=\"uxa-kicker\">Check your page<\/p><p class=\"uxa-check__title\">Does your page have any of these?<\/p><p class=\"uxa-check__text\">Type your page\u2019s address and UX Robot shows its accessibility, real-visitor speed and search scores in about a minute, free and without signing up.<\/p><form class=\"uxa-check-form\" action=\"\/\" method=\"get\" data-uxa-check-form><label class=\"uxa-check-form__label\" for=\"uxa-check-inline-1\">Your page\u2019s address<\/label><span class=\"uxa-check-form__row\"><input class=\"uxa-check-form__input\" id=\"uxa-check-inline-1\" type=\"text\" name=\"website\" inputmode=\"url\" autocomplete=\"url\" autocapitalize=\"off\" spellcheck=\"false\" maxlength=\"255\" placeholder=\"yourwebsite.com\" required><button class=\"uxa-check-form__button\" type=\"submit\">Check my page<\/button><\/span><input type=\"hidden\" name=\"utm_source\" value=\"blog\"><input type=\"hidden\" name=\"utm_medium\" value=\"guide\"><input type=\"hidden\" name=\"utm_campaign\" value=\"accessibility\"><input type=\"hidden\" name=\"utm_content\" value=\"bad-color-contrast-examples\"><input type=\"hidden\" name=\"utm_term\" value=\"inline\"><\/form><\/aside>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-to-check-color-contrast\">How to check color contrast in ten minutes<\/h2>\n\n\n\n<p class=\"uxa-gd-answer wp-block-paragraph\">Open the page in Chrome, run an accessibility check to list the low contrast text, then use a contrast checker on everything the automatic check cannot judge: text over images, field borders, icons, focus outlines, and hover and error states. Do it on a phone screen size as well as a computer.<\/p>\n\n\n\n<ol class=\"uxa-gd-steps\">\n    <li><strong>List the obvious failures automatically<\/strong><span>Chrome\u2019s developer tools, through Lighthouse or the Issues panel, list text that fails the contrast ratio.<\/span><\/li>\n    <li><strong>Check each failure in the color picker<\/strong><span>Inspect the element and open its text color. The picker shows the ratio and suggests a passing color.<\/span><\/li>\n    <li><strong>Test what the tools miss<\/strong><span>Text over photos and gradients, field borders, icons and charts need a manual check.<\/span><\/li>\n    <li><strong>Press Tab through the page<\/strong><span>Can you always see where the keyboard is? Measure the focus outline against what is next to it.<\/span><\/li>\n    <li><strong>Check every state<\/strong><span>Hover, pressed, visited, error and success colors, and any dark mode.<\/span><\/li>\n    <li><strong>Look again on a phone<\/strong><span>Headlines wrap over different parts of a photo, and sticky bars sit over different content.<\/span><\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Google\u2019s guide to <a href=\"https:\/\/developer.chrome.com\/docs\/devtools\/accessibility\/contrast\">finding and fixing low contrast text in Chrome<\/a> walks through the developer tools step by step, including how to see your page as someone with a color vision deficiency would. For a single pair of colors, <a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\">WebAIM\u2019s contrast checker<\/a> takes two color codes and tells you which levels they pass.<\/p>\n\n\n\n<aside class=\"uxa-check is-callout\" data-uxa-check=\"callout\"><p class=\"uxa-check__text\"><strong>Curious about your own page?<\/strong> UX Robot\u2019s free check gives your page an accessibility score in about a minute.<\/p><a class=\"uxa-check__link\" href=\"\/?utm_source=blog&#038;utm_medium=guide&#038;utm_campaign=accessibility&#038;utm_content=bad-color-contrast-examples&#038;utm_term=callout\">Check my page<\/a><\/aside>\n\n\n\n<p class=\"wp-block-paragraph\">Automatic checks have limits worth knowing. They read the colors in the code, so they cannot see a photo behind the text, and they skip borders, icons and focus outlines. A page can score well and still have a sign-up form with invisible fields. That is where an audit earns its keep. <a href=\"\/documentation\/page-audits\">UX Robot\u2019s page audits<\/a> go further than a score: your own AI agent checks the page for usability and WCAG 2.2, measures contrast on the screen as people see it, marks each problem on a screenshot, writes the steps to see it and the fix, and says whether each finding was measured or judged, which is how the Happy Menu examples above were found. The free plan covers five page audits a month, Pro removes the limit, and Enterprise audits whole journeys with your analytics, Search Console and Clarity data, sends issues to your tracker and rechecks them after you ship. See the <a href=\"\/pricing\">plans<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"fix-contrast-keep-your-brand\">How to fix poor color contrast without losing your brand<\/h2>\n\n\n\n<p class=\"uxa-gd-answer wp-block-paragraph\">Give each brand color a darker shade for text and a role for large areas, pair bright backgrounds with dark text, and write the approved pairs into your design system so nobody has to guess. Most brands keep their look; what changes is where each color is allowed to go.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Contrast problems usually come from one decision repeated across hundreds of screens, so fix the decision rather than each screen:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Split each brand color into roles.<\/strong> The bright version is for logos, illustrations, large shapes and backgrounds behind dark text. A darker version of the same hue is for text, links and button fills behind white text. Happy Menu\u2019s green could stay #00AF74 on its logo and become #007A50 wherever it carries words.<\/li>\n<li><strong>Choose the text color for each background, not the other way round.<\/strong> On bright yellows, oranges, light greens and sky blues, dark text nearly always passes and white nearly never does.<\/li>\n<li><strong>Write down the approved pairs.<\/strong> A short table in your design system, listing each background with the text colors allowed on it and their ratios, stops new pages bringing the problem back.<\/li>\n<li><strong>Give interface parts their own tokens.<\/strong> A border color for fields at 3:1 or more, a focus outline color that passes on every background you use, and error and success colors that pass as text.<\/li>\n<li><strong>Check dark mode separately.<\/strong> Light gray on near black has the same problem as gray on white, and saturated brand colors often glow too brightly to read on dark backgrounds.<\/li>\n<li><strong>Recheck after every redesign.<\/strong> Contrast drifts back when someone adds a new shade, a new banner or a new photo. Make it part of your release checks.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">If you are planning a bigger change, our guide on <a href=\"\/ux-audits\/guides\/ux-audit\/\">how to do a UX audit<\/a> shows where contrast fits among the other checks, and the guide to <a href=\"\/ux-audits\/guides\/good-landing-page-experience\/\">a good landing page experience<\/a> covers the pages where unreadable buttons cost the most.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"color-and-contrast-checklist\">A color and contrast checklist<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Use this on every page of a journey, from the first screen to the confirmation. It covers the color and contrast checks at WCAG 2.2 level AA that catch the most problems.<\/p>\n\n\n\n<div class=\"uxa-gd-checklist-group\">\n    <h3>Text<\/h3>\n    <ul class=\"uxa-gd-checklist\">\n        <li>Body text, labels and links measure at least 4.5:1 against their background.<\/li>\n        <li>Large text, at least 24 pixels or about 18.5 pixels bold, measures at least 3:1.<\/li>\n        <li>Small print, captions, dates and footers meet the same 4.5:1 as everything else.<\/li>\n        <li>Text people need inside empty fields measures 4.5:1, or the instruction sits outside the field.<\/li>\n        <li>Text over photos and gradients passes against the lightest part behind it, on a phone too.<\/li>\n    <\/ul>\n<\/div>\n<div class=\"uxa-gd-checklist-group\">\n    <h3>Buttons and links<\/h3>\n    <ul class=\"uxa-gd-checklist\">\n        <li>Button labels pass against the button color, including hover and pressed states.<\/li>\n        <li>Links in text are underlined, or otherwise marked by more than color.<\/li>\n        <li>Icon-only buttons, such as menu, close and chat, measure at least 3:1.<\/li>\n        <li>Buttons without a fill have a border of at least 3:1.<\/li>\n    <\/ul>\n<\/div>\n<div class=\"uxa-gd-checklist-group\">\n    <h3>Forms<\/h3>\n    <ul class=\"uxa-gd-checklist\">\n        <li>Field borders, checkboxes and toggles measure at least 3:1 against the page.<\/li>\n        <li>Error messages pass as text, and say what is wrong in words, not only in red.<\/li>\n        <li>Required fields are marked with a word or symbol, not only a color.<\/li>\n        <li>The focused field is clearly different from the others.<\/li>\n    <\/ul>\n<\/div>\n<div class=\"uxa-gd-checklist-group\">\n    <h3>Focus, status and charts<\/h3>\n    <ul class=\"uxa-gd-checklist\">\n        <li>The keyboard focus outline measures at least 3:1 on every background it appears on.<\/li>\n        <li>Status labels such as in stock, paid or failed use a word or icon as well as a color.<\/li>\n        <li>Chart lines and bars measure at least 3:1, with labels or patterns rather than color alone.<\/li>\n        <li>Dark mode, if you have one, passes the same checks.<\/li>\n    <\/ul>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"color-contrast-faq\">Color contrast questions people ask<\/h2>\n\n\n\n<div class=\"uxa-gd-faq\">\n    <details>\n        <summary>What is a good color contrast ratio?<\/summary>\n        <p>At least 4.5:1 for normal text and 3:1 for large text, buttons, field borders, icons and focus outlines meets WCAG 2.2 level AA. For long reading, aim higher: 7:1 for normal text meets level AAA and is easier on everyone\u2019s eyes.<\/p>\n    <\/details>\n    <details>\n        <summary>Do logos need to meet contrast requirements?<\/summary>\n        <p>No. Text that is part of a logo or brand name has no contrast requirement. The problem starts when the logo\u2019s colors are reused for labels, links and buttons, which do.<\/p>\n    <\/details>\n    <details>\n        <summary>Do disabled buttons need good contrast?<\/summary>\n        <p>WCAG does not set a contrast minimum for inactive controls. Be careful, though: a disabled button nobody can read leaves people wondering what they missed. Say near the button what still needs doing.<\/p>\n    <\/details>\n    <details>\n        <summary>Is gray text on white always bad?<\/summary>\n        <p>No, only light gray. On white, #767676 is about the lightest gray that reaches 4.5:1, and anything darker passes for normal text. Lighter grays can work for large headings at 3:1, but not for body copy.<\/p>\n    <\/details>\n    <details>\n        <summary>Which colors are the hardest to get right?<\/summary>\n        <p>Bright yellows, oranges, light greens and sky blues, because they are very light. They rarely pass with white text, so pair them with dark text or use a darker shade where they carry words. Red and green together are another pair to avoid as the only signal.<\/p>\n    <\/details>\n    <details>\n        <summary>Will fixing contrast fix accessibility?<\/summary>\n        <p>It fixes the most common problem, but not all of them. Keyboard access, labels, alternative text and zoom matter as much. Contrast is a good place to start because it is easy to measure and usually quick to fix.<\/p>\n    <\/details>\n<\/div>\n\n\n\n<div class=\"uxa-gd-sources\">\n    <p class=\"uxa-kicker\">Sources<\/p>\n    <ol>\n        <li><a href=\"https:\/\/webaim.org\/projects\/million\/\">The WebAIM Million<\/a>, WebAIM, 2026: low contrast text on the top million home pages, 2019 to 2026.<\/li>\n        <li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/contrast-minimum.html\">Understanding Success Criterion 1.4.3: Contrast (Minimum)<\/a>, W3C.<\/li>\n        <li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/non-text-contrast.html\">Understanding Success Criterion 1.4.11: Non-text Contrast<\/a>, W3C.<\/li>\n        <li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/use-of-color.html\">Understanding Success Criterion 1.4.1: Use of Color<\/a>, W3C.<\/li>\n        <li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/contrast-enhanced.html\">Understanding Success Criterion 1.4.6: Contrast (Enhanced)<\/a>, W3C.<\/li>\n        <li><a href=\"https:\/\/www.nei.nih.gov\/learn-about-eye-health\/eye-conditions-and-diseases\/color-blindness\">Color blindness<\/a>, National Eye Institute.<\/li>\n        <li><a href=\"https:\/\/developer.chrome.com\/docs\/devtools\/accessibility\/contrast\">Make your website more readable<\/a>, Chrome for Developers.<\/li>\n        <li><a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\">Contrast checker<\/a>, WebAIM.<\/li>\n        <li>UX Robot audits of happymenu.co on a phone and a computer, October 2026, published with the owner\u2019s permission.<\/li>\n    <\/ol>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>Bad color contrast examples from a real audit, with the ratio each one measured, the minimum it needed and a fix that keeps your brand colors.<\/p>\n","protected":false},"featured_media":437,"template":"","guide-topics":[17],"class_list":["post-442","guide","type-guide","status-publish","has-post-thumbnail","hentry","guide_topic-accessibility"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.2 - aioseo.com -->\n\t<meta name=\"description\" content=\"Bad color contrast examples from a real audit, with the ratio each one measured, the minimum it needed and a fix that keeps your brand colors.\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/uxrobot.ai\/ux-audits\/guides\/bad-color-contrast-examples\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.2\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"UX Audits - Independent, evidence-led UX audits.\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Bad color contrast examples and how to fix each one - UX Audits\" \/>\n\t\t<meta property=\"og:description\" content=\"Bad color contrast examples from a real audit, with the ratio each one measured, the minimum it needed and a fix that keeps your brand colors.\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/uxrobot.ai\/ux-audits\/guides\/bad-color-contrast-examples\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2026-11-03T19:17:42+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2026-11-03T19:17:42+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Bad color contrast examples and how to fix each one - UX Audits\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Bad color contrast examples from a real audit, with the ratio each one measured, the minimum it needed and a fix that keeps your brand colors.\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/uxrobot.ai\\\/ux-audits\\\/guides\\\/bad-color-contrast-examples\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/uxrobot.ai\\\/ux-audits\\\/#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/uxrobot.ai\\\/ux-audits\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/uxrobot.ai\\\/ux-audits\\\/guides\\\/#listItem\",\"name\":\"Guides\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/uxrobot.ai\\\/ux-audits\\\/guides\\\/#listItem\",\"position\":2,\"name\":\"Guides\",\"item\":\"https:\\\/\\\/uxrobot.ai\\\/ux-audits\\\/guides\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/uxrobot.ai\\\/ux-audits\\\/guides\\\/topic\\\/accessibility\\\/#listItem\",\"name\":\"Accessibility\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/uxrobot.ai\\\/ux-audits\\\/#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/uxrobot.ai\\\/ux-audits\\\/guides\\\/topic\\\/accessibility\\\/#listItem\",\"position\":3,\"name\":\"Accessibility\",\"item\":\"https:\\\/\\\/uxrobot.ai\\\/ux-audits\\\/guides\\\/topic\\\/accessibility\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/uxrobot.ai\\\/ux-audits\\\/guides\\\/bad-color-contrast-examples\\\/#listItem\",\"name\":\"Bad color contrast examples and how to fix each one\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/uxrobot.ai\\\/ux-audits\\\/guides\\\/#listItem\",\"name\":\"Guides\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/uxrobot.ai\\\/ux-audits\\\/guides\\\/bad-color-contrast-examples\\\/#listItem\",\"position\":4,\"name\":\"Bad color contrast examples and how to fix each one\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/uxrobot.ai\\\/ux-audits\\\/guides\\\/topic\\\/accessibility\\\/#listItem\",\"name\":\"Accessibility\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/uxrobot.ai\\\/ux-audits\\\/#organization\",\"name\":\"UX Audits\",\"description\":\"Independent, evidence-led UX audits.\",\"url\":\"https:\\\/\\\/uxrobot.ai\\\/ux-audits\\\/\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/uxrobot.ai\\\/ux-audits\\\/guides\\\/bad-color-contrast-examples\\\/#webpage\",\"url\":\"https:\\\/\\\/uxrobot.ai\\\/ux-audits\\\/guides\\\/bad-color-contrast-examples\\\/\",\"name\":\"Bad color contrast examples and how to fix each one - UX Audits\",\"description\":\"Bad color contrast examples from a real audit, with the ratio each one measured, the minimum it needed and a fix that keeps your brand colors.\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/uxrobot.ai\\\/ux-audits\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/uxrobot.ai\\\/ux-audits\\\/guides\\\/bad-color-contrast-examples\\\/#breadcrumblist\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/uxrobot.ai\\\/ux-audits\\\/wp-content\\\/uploads\\\/2026\\\/11\\\/guide-bad-color-contrast-examples-bad-color-contrast-examples-featured.jpg\",\"@id\":\"https:\\\/\\\/uxrobot.ai\\\/ux-audits\\\/guides\\\/bad-color-contrast-examples\\\/#mainImage\",\"width\":780,\"height\":439,\"caption\":\"Happy Menu's green Get Listed Free button with white text on a phone, marked with a red box for low contrast, above the Claim Your Restaurant button\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/uxrobot.ai\\\/ux-audits\\\/guides\\\/bad-color-contrast-examples\\\/#mainImage\"},\"datePublished\":\"2026-11-04T06:17:42+11:00\",\"dateModified\":\"2026-11-04T06:17:42+11:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/uxrobot.ai\\\/ux-audits\\\/#website\",\"url\":\"https:\\\/\\\/uxrobot.ai\\\/ux-audits\\\/\",\"name\":\"UX Audits\",\"description\":\"Independent, evidence-led UX audits.\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/uxrobot.ai\\\/ux-audits\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Bad color contrast examples and how to fix each one - UX Audits","description":"Bad color contrast examples from a real audit, with the ratio each one measured, the minimum it needed and a fix that keeps your brand colors.","canonical_url":"https:\/\/uxrobot.ai\/ux-audits\/guides\/bad-color-contrast-examples\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BreadcrumbList","@id":"https:\/\/uxrobot.ai\/ux-audits\/guides\/bad-color-contrast-examples\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/uxrobot.ai\/ux-audits\/#listItem","position":1,"name":"Home","item":"https:\/\/uxrobot.ai\/ux-audits\/","nextItem":{"@type":"ListItem","@id":"https:\/\/uxrobot.ai\/ux-audits\/guides\/#listItem","name":"Guides"}},{"@type":"ListItem","@id":"https:\/\/uxrobot.ai\/ux-audits\/guides\/#listItem","position":2,"name":"Guides","item":"https:\/\/uxrobot.ai\/ux-audits\/guides\/","nextItem":{"@type":"ListItem","@id":"https:\/\/uxrobot.ai\/ux-audits\/guides\/topic\/accessibility\/#listItem","name":"Accessibility"},"previousItem":{"@type":"ListItem","@id":"https:\/\/uxrobot.ai\/ux-audits\/#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/uxrobot.ai\/ux-audits\/guides\/topic\/accessibility\/#listItem","position":3,"name":"Accessibility","item":"https:\/\/uxrobot.ai\/ux-audits\/guides\/topic\/accessibility\/","nextItem":{"@type":"ListItem","@id":"https:\/\/uxrobot.ai\/ux-audits\/guides\/bad-color-contrast-examples\/#listItem","name":"Bad color contrast examples and how to fix each one"},"previousItem":{"@type":"ListItem","@id":"https:\/\/uxrobot.ai\/ux-audits\/guides\/#listItem","name":"Guides"}},{"@type":"ListItem","@id":"https:\/\/uxrobot.ai\/ux-audits\/guides\/bad-color-contrast-examples\/#listItem","position":4,"name":"Bad color contrast examples and how to fix each one","previousItem":{"@type":"ListItem","@id":"https:\/\/uxrobot.ai\/ux-audits\/guides\/topic\/accessibility\/#listItem","name":"Accessibility"}}]},{"@type":"Organization","@id":"https:\/\/uxrobot.ai\/ux-audits\/#organization","name":"UX Audits","description":"Independent, evidence-led UX audits.","url":"https:\/\/uxrobot.ai\/ux-audits\/"},{"@type":"WebPage","@id":"https:\/\/uxrobot.ai\/ux-audits\/guides\/bad-color-contrast-examples\/#webpage","url":"https:\/\/uxrobot.ai\/ux-audits\/guides\/bad-color-contrast-examples\/","name":"Bad color contrast examples and how to fix each one - UX Audits","description":"Bad color contrast examples from a real audit, with the ratio each one measured, the minimum it needed and a fix that keeps your brand colors.","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/uxrobot.ai\/ux-audits\/#website"},"breadcrumb":{"@id":"https:\/\/uxrobot.ai\/ux-audits\/guides\/bad-color-contrast-examples\/#breadcrumblist"},"image":{"@type":"ImageObject","url":"https:\/\/uxrobot.ai\/ux-audits\/wp-content\/uploads\/2026\/11\/guide-bad-color-contrast-examples-bad-color-contrast-examples-featured.jpg","@id":"https:\/\/uxrobot.ai\/ux-audits\/guides\/bad-color-contrast-examples\/#mainImage","width":780,"height":439,"caption":"Happy Menu's green Get Listed Free button with white text on a phone, marked with a red box for low contrast, above the Claim Your Restaurant button"},"primaryImageOfPage":{"@id":"https:\/\/uxrobot.ai\/ux-audits\/guides\/bad-color-contrast-examples\/#mainImage"},"datePublished":"2026-11-04T06:17:42+11:00","dateModified":"2026-11-04T06:17:42+11:00"},{"@type":"WebSite","@id":"https:\/\/uxrobot.ai\/ux-audits\/#website","url":"https:\/\/uxrobot.ai\/ux-audits\/","name":"UX Audits","description":"Independent, evidence-led UX audits.","inLanguage":"en-US","publisher":{"@id":"https:\/\/uxrobot.ai\/ux-audits\/#organization"}}]},"og:locale":"en_US","og:site_name":"UX Audits - Independent, evidence-led UX audits.","og:type":"article","og:title":"Bad color contrast examples and how to fix each one - UX Audits","og:description":"Bad color contrast examples from a real audit, with the ratio each one measured, the minimum it needed and a fix that keeps your brand colors.","og:url":"https:\/\/uxrobot.ai\/ux-audits\/guides\/bad-color-contrast-examples\/","article:published_time":"2026-11-03T19:17:42+00:00","article:modified_time":"2026-11-03T19:17:42+00:00","twitter:card":"summary_large_image","twitter:title":"Bad color contrast examples and how to fix each one - UX Audits","twitter:description":"Bad color contrast examples from a real audit, with the ratio each one measured, the minimum it needed and a fix that keeps your brand colors."},"aioseo_meta_data":{"post_id":"442","title":null,"description":null,"keywords":null,"keyphrases":null,"focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_custom_url":null,"og_image_custom_fields":null,"og_image_url":null,"og_image_width":null,"og_image_height":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_image_url":null,"twitter_title":null,"twitter_description":null,"schema_type":"default","schema_type_options":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"","isEnabled":true},"graphs":[]},"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"limit_modified_date":false,"ai":null,"breadcrumb_settings":null,"seo_analyzer_scan_date":null,"created":"2026-11-03 20:52:16","updated":"2026-11-03 20:52:16"},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/uxrobot.ai\/ux-audits\/\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/uxrobot.ai\/ux-audits\/guides\/\" title=\"Guides\">Guides<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/uxrobot.ai\/ux-audits\/guides\/topic\/accessibility\/\" title=\"Accessibility\">Accessibility<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tBad color contrast examples and how to fix each one\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/uxrobot.ai\/ux-audits\/"},{"label":"Guides","link":"https:\/\/uxrobot.ai\/ux-audits\/guides\/"},{"label":"Accessibility","link":"https:\/\/uxrobot.ai\/ux-audits\/guides\/topic\/accessibility\/"},{"label":"Bad color contrast examples and how to fix each one","link":"https:\/\/uxrobot.ai\/ux-audits\/guides\/bad-color-contrast-examples\/"}],"_links":{"self":[{"href":"https:\/\/uxrobot.ai\/ux-audits\/wp-json\/wp\/v2\/guides\/442","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/uxrobot.ai\/ux-audits\/wp-json\/wp\/v2\/guides"}],"about":[{"href":"https:\/\/uxrobot.ai\/ux-audits\/wp-json\/wp\/v2\/types\/guide"}],"version-history":[{"count":1,"href":"https:\/\/uxrobot.ai\/ux-audits\/wp-json\/wp\/v2\/guides\/442\/revisions"}],"predecessor-version":[{"id":443,"href":"https:\/\/uxrobot.ai\/ux-audits\/wp-json\/wp\/v2\/guides\/442\/revisions\/443"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/uxrobot.ai\/ux-audits\/wp-json\/wp\/v2\/media\/437"}],"wp:attachment":[{"href":"https:\/\/uxrobot.ai\/ux-audits\/wp-json\/wp\/v2\/media?parent=442"}],"wp:term":[{"taxonomy":"guide_topic","embeddable":true,"href":"https:\/\/uxrobot.ai\/ux-audits\/wp-json\/wp\/v2\/guide-topics?post=442"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}