Diagnosing and Correcting Frequent Colour Errors in Graphic Design

The most frequent colour error in graphic design is not a bad palette. It is a contrast failure that a checker approves and a human cannot read. A contrast-checker plugin can report a passing 4.5:1 ratio for a button label that is actually unreadable, because the tool sampled a rendered pixel whose antialiasing blended the foreground and background, inflating the ratio by as much as 1.5:1. The fix is to measure the contrast ratio between the flat foreground colour and the flat background colour, never on an edge pixel, and to verify the result against WCAG 2.2 thresholds. This guide walks through the common colour mistakes design teams make, each presented as a failure mode with a root cause and a verifiable fix, not a matter of taste.

Here is the trap that catches more designers than any other. You open your contrast-checker plugin, click on a paragraph of white text over a dark blue button, and the tool reports a comfortable 6.2:1 ratio. You ship it. In production, the text sits on a gradient or a photographic background, and the plugin's eyedropper sampled a pixel where the glyph's antialiased edge had already blended the white text with the blue button, producing a lighter blue that passed. The real ratio, computed from the relative luminance of pure white and the button's actual background colour, is 3.9:1. That fails WCAG 2.2 for normal text, which demands 4.5:1. It also fails for large text, which demands 3:1.

The root cause is that contrast checkers sample rendered output, not design intent. They cannot know that the pixel they measured is a blend. The fix is a discipline, not a tool: compute the contrast ratio using the formula (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter colour and L2 is the darker, both taken from the flat fill values in your design file. Do this for every text and UI component. Then run a checker as a second opinion. For text at any size, if the flat-colour ratio passes, the antialiased edge will only make it pass more comfortably. If the flat-colour ratio fails, no amount of edge blending will save it.

This is not pedantry. The WCAG 2.2 minimum contrast ratio for normal text is 4.5:1. For large text, meaning 18pt or 14pt bold, it is 3:1. For UI components and graphical objects, it is 3:1. The enhanced AAA thresholds are 7:1 for normal text and 4.5:1 for large text. If your design relies on a checker's pass where the underlying flat colours fail, you have built a failure mode, not a design. The correction is always the same: open the colour picker, read the hex values, and calculate the ratio yourself before you trust the plugin.

The second most common colour error is low contrast design. Users complain about it most, even if they lack the vocabulary to say why. Any guide to common colour mistakes must start here because it is the single largest driver of accessibility refusals and usability complaints. The root cause is designing on a bright monitor in a dim room, where the screen's luminance makes a 3:1 ratio look like 8:1. On a phone in direct sunlight, that same 3:1 ratio collapses to below 2:1, and the text disappears.

Adopt a Ratio Budget

The fix for low contrast design is to adopt a ratio budget. Decide the minimum contrast ratio for every element class before you start: body text at 4.5:1, large text at 3:1, UI components at 3:1. Then test each colour pair against the WCAG 2.2 thresholds using the relative luminance calculation, not the hex code alone. A colour's luminance is not its brightness as the eye sees it. It is a weighted sum of the linearised RGB channels. Two tones with the same perceived brightness can have a vastly different luminance ratio, which is why a grey surface with white text can fail while a blue surface with white text passes.

Calculate the Exact Shift

When you are correcting low contrast design, do not darken the background or lighten the text by a guess. Calculate the exact ratio you need, then move the colour's luminance by the required amount. If the text is a 60% grey on white, the ratio is about 3.9:1, just short of the 4.5:1 needed. Darken the grey to 55% and you are at 4.6:1. That is a verifiable fix, not a stylistic choice. For dark mode, where pure black causes halation for users with astigmatism, use a dark surface such as #121212 to #1E1E1E, which is Material Design's recommended surface range, and reserve pure black for OLED-specific contrast or large display elements. Text on such surfaces should be white at 87% opacity for high emphasis, 60% for medium, and 38% for disabled. These are the Material Design 3 tonal palette recommendations and reflect how relative luminance behaves on dark backgrounds.

Oversaturation has two distinct presentations, one digital and one in print. On screen, oversaturation is the habit of pushing saturation to maximum to make a colour stand out, ignoring that the eye perceives hue and brightness separately. A fully saturated green at 100% saturation and 50% lightness is darker than a fully saturated yellow at the same lightness, so a row of saturated hues vibrates, with the lighter ones appearing to advance and the darker ones to recede. This is simultaneous contrast at work, and it is a common mistake design teams make when they are in a hurry to make something lively. The fix is to control saturation relative to luminance, not in isolation. Use a colour harmony system, such as Material Design 3's tonal palette, which derives 13 tones from a single key colour and enforces a consistent lightness relationship across hues.

Gamut Clipping in Print

In print, oversaturation is the direct cause of RGB-to-CMYK gamut clipping. A screen blue, such as #0000FF, has an sRGB gamut that extends beyond the CMYK gamut of a typical coated stock. When you convert that blue to CMYK without soft-proofing, the resulting print is a muddy purple because the ink cannot reproduce the blue's saturated hue. The root cause is designing in the RGB colour space, which is additive and light-emitting, and then converting to the subtractive CMYK ink model at export with no control over the rendering intent. The fix is to soft-proof in your layout software using the ICC profile of the target print device. Choose a perceptual rendering intent for photographic images and a relative colorimetric intent for vector graphics and spot colours. If you are exporting for commercial print in Europe or Australia, the correct output intent is a Fogra profile, such as Fogra39 for coated stock or Fogra47 for uncoated stock.

The verifiable fix for oversaturation in print is to check the total ink coverage. A rich black for coated stock is a CMYK build of C 60 M 40 Y 40 K 100, while uncoated stock needs a lighter build of C 40 M 30 Y 30 K 100. If you do not soft-proof, you will not see that a bright RGB orange, which has an sRGB gamut beyond CMYK, prints as a flat brown. That is gamut clipping, and it is not a matter of opinion. Convert your images to CMYK using the correct ICC profile and inspect the result at 100% zoom. Do not trust the screen preview, which shows an unproofed RGB image. The display calibration for print work should be 80 to 120 cd/m² luminance, the recommended range for soft-proofing, because a brighter monitor will make the print look darker than it is.

If you are working in print, the fix for oversaturation is a workflow, not a single action. Start by assigning the ICC profile of the target output device to your document, then switch on soft-proofing in InDesign or Affinity Publisher. InDesign's default transparency blend space is CMYK for print documents, and Affinity Designer's default CMYK profile is U.S. Web Coated (SWOP) v2. Do not rely on the default. The printer's profile is the only one that matters. When you soft-proof, you are simulating the print output on screen, and you will see exactly which colours will clip.

For RGB images placed into a CMYK document, do not convert them to CMYK in an editor such as Photoshop first. Place the RGB file into the layout, then convert at export using the rendering intent that matches the content. Perceptual rendering compresses the entire gamut to fit, preserving the relationship between colours, and it is correct for photographic images. Relative colorimetric clips out-of-gamut colours and shifts the rest, and it is correct for spot colours and vector graphics where you need to hold a brand hue. If you use the wrong intent, you get flat photographs or clipped spot colours. There is no universal best intent, only the correct one for the image type.

The failure case is when you are at the printer or the prepress house and the proof comes back muddy. You can ask for a corrected proof, but you cannot fix gamut clipping at that stage because the file has already been converted. Soft-proof before you export, using the exact Fogra profile your printer specifies. If you do not have the profile, ask for it. A commercial printer who cannot supply an ICC profile for their own press is not a printer you should use. Soft-proofing is not a luxury. It is the difference between a blue and a muddy purple, and it is the only way to control the RGB-to-CMYK gamut clipping that is one of the most common colour mistakes design teams make.

Too many accent colours is a failure of restraint. It makes a design look amateur before a single contrast ratio is calculated. An accent colour is a single hue used sparingly to draw attention to interactive elements, highlights, or calls to action. It is not a second primary colour, a third surface tone, or a way to make every section of a page feel different. When a design uses more than two or three accent hues, none of them functions as an accent, and the eye has no place to rest. This issue is a matter of system design, not taste.

The root cause is that the designer is creating a marketing site, a dashboard, and a pitch deck from the same style guide, and each deliverable introduces a new accent to suit its context. The fix is to define a single accent colour in your design system and then restrict its use to interactive states and key data visualisation. The Material Design 3 tonal palette is a useful model: generate 13 tones from one key colour, and use those tones for surfaces, containers, and text, rather than introducing a new hue. If you need a second accent for data visualisation, choose a hue that is distinct from the first under chromatic deficiency simulation, not just in the RGB gamut.

The verifiable fix for too many accent colours is to count them. If you cannot name the accent colour in one word, you have too many. A brand that uses a coral accent for primary actions, a teal accent for links, and a mustard accent for sale prices has made three different accent choices and called them a system. Consolidate: choose one accent, use it for all interactive elements, and use tints and shades of that single hue for secondary states. The result is a colour harmony that survives contact with a developer, a printer, or a brand manager, because it is a rule, not a preference.

To fix an over-accented design, start by listing every colour that is not neutral. For each one, ask what job it does. If it does not highlight an interactive element, separate data, or indicate a state, it is not an accent. It is decoration, and it must go. Then map each remaining accent to a single hue. If you have a blue link colour and a blue primary button, they should be the same hue, with the button using a darker or lighter tone of that hue for its state. If you have a green success message and a red error message, those are semantic colours, not accents. They have a different job and should be defined as a separate palette tier.

The failure case is when you are in a code review or a print proof and the client says the orange button does not look right. That is because the orange is one of five accent colours, and it has no more visual weight than the teal links or the mustard highlights. Reduce the number of accent colours to one, then rely on tonal variation and whitespace to create hierarchy. This is not a free pass to be dull. It is a discipline that makes the one accent colour you keep actually work. A single accent, used consistently, is what makes a call-to-action say click here without shouting.

The result of fixing too many accent colours is a design that is calmer, more accessible, and easier to maintain. It is also a design that is more resilient to the demands of WCAG 2.2, because each accent colour must be tested against its background. Testing ten hues is ten times the work of testing one. The rule is simple: if a colour is not a semantic state, a brand primary, or a neutral, it is an accent, and you should have exactly one. That is the entire fix.

The most expensive colour mistake in design is RGB-to-CMYK gamut clipping, and it happens because the designer never soft-proofed. A screen blue, such as the sRGB value #0000FF, has a relative luminance and a chromaticity that the CMYK ink gamut cannot reproduce. When the file is converted to CMYK for print, the blue is mapped to the closest printable colour, which is a muddy purple. The root cause is not the conversion step. It is the absence of a soft-proof during the design phase. The designer worked in the RGB colour space, an additive model for light-emitting screens, and did not anticipate that the subtractive CMYK model for ink on paper would clip the colour.

The fix is to soft-proof using the ICC profile of the target print device, and to do it in the layout software, not in Photoshop. InDesign has a Soft Proof option under the View menu, where you can select the output profile and a rendering intent. For commercial print in Europe, Australia, and most of the world, the output intent is a Fogra profile, such as Fogra39 for coated stock or Fogra47 for uncoated. In North America, it is a U.S. Web Coated (SWOP) v2 profile. Use the exact profile the printer specifies, not a generic or default one, because each press has a different gamut.

When you soft-proof, you will see the gamut clipping in real time, and you can make a choice. Adjust the colour in RGB to fall within the CMYK gamut. Convert the image to CMYK using a relative colorimetric rendering intent that preserves the closest match. Or accept the clip and choose a different hue. The failure case is when a brand's logo, specified as an RGB blue, is converted to CMYK and becomes a different colour, and the client rejects the print run. The cost of that failure is a reprint, measured in hours, not minutes. The verifiable fix is to test the conversion before you commit: export a PDF with the correct Fogra profile, open it in Acrobat, and use the Output Preview tool to check for out-of-gamut colours. If any are flagged, you have a gamut clipping problem and you need to adjust the source colour.

To fix RGB-to-CMYK gamut clipping, move the decision upstream. Before you convert a single image, ask what the output device can actually print. The CMYK gamut is significantly smaller than sRGB, and sRGB is smaller than Adobe RGB (1998) or Display P3. Adobe RGB (1998) covers about 50% of the visible spectrum, and Display P3 covers about 45%, while sRGB covers about 35%. If you are designing for print, the correct working space is not ProPhoto RGB, which has a reference luminance of 160 cd/m² and an enormous gamut that no printer can match. It is a CMYK profile that matches your output.

Three Practical Steps

First, convert your document to the CMYK profile before you place images, so that all colours are defined in the print gamut from the start. Second, use the soft-proofing feature in your layout software to check for clipping, and switch between perceptual and relative colorimetric rendering intents to see which one preserves the image better. Perceptual is for photographs, where you want to preserve the relationships between colours even if some are clipped. Relative colorimetric is for vector graphics and spot colours, where you need to hold a brand hue and are willing to clip out-of-gamut colours to do so. The correct intent depends on the content type.

Third, and this is the step most designers skip, ask your printer for their ICC profile before you design a single page. A commercial printer who cannot supply a profile is not a printer. They are a reseller of a print service, and you are the quality control department. The profile is the specification for what your colours will look like on their press, and it is free. If you design without it, you are driving in the dark and then blaming the road. The failure case is the 1 a.m. deadline when the printer's RIP rejects the file because it contains RGB images and unflattened transparency, and you have no time to fix it. Soft-proof, convert, and check the output preview before the deadline, not after.

The most dangerous tool in a designer's accessibility toolkit is the contrast checker, because it produces a number that looks like a fact. A common failure is when a checker reports a passing ratio for text that is unreadable, and the design is shipped. The root cause is that the checker samples rendered pixels, and on an antialiased edge, the pixel is a blend of the text colour and the background colour. This blend has a higher luminance ratio than the flat colours, because the text glyph's edge is partially transparent, so the checker measures a lighter text on a darker background or vice versa. The reported ratio is inflated by as much as 1.5:1, and a text that should fail at 3.9:1 is reported as passing at 4.5:1.

The fix is to never trust a contrast checker on rendered output. Instead, measure the contrast ratio using the flat fill colours from your design file. The WCAG 2.2 formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter colour and L2 is the darker. Relative luminance is calculated from the linearised sRGB channels, not from the hex code. A text that is a mid-grey on white has a luminance of about 0.18, and the white has a luminance of 1.0, so the ratio is (1.05) / (0.23) = 4.5:1, which passes. But if the checker samples an antialiased pixel where the text is 50% blended, the luminance is higher, and the ratio jumps to 6:1 or more.

The verifiable fix is a workflow: choose your text and background colours, calculate the ratio from the flat values, and then apply a test to the antialiased edge. Do this by rendering the text at its actual size and checking that the edge pixels are not the ones that meet the threshold. A simpler method is to use a colour blindness simulation tool, such as Sim Daltonism version 2.1, to check that the text remains distinguishable under deuteranopia, protanopia, and tritanopia. Colour blindness prevalence in Northern European males is about 8%, and about 0.5% of females, so this is not a niche concern. The false pass is a failure of verification. Measure twice, ship once.

When you are fixing contrast issues, you need a target ratio and a method to test it. For body text, the WCAG 2.2 minimum is 4.5:1. For large text, which is 18pt or 14pt bold, it is 3:1. For UI components and graphical objects, it is also 3:1. The enhanced AAA standard is 7:1 for body and 4.5:1 for large. Use this if your audience is older or if the text is essential to completing a task. The fix for a contrast failure is to adjust the relative luminance of the foreground or background until the ratio passes. Do this by changing the colour's lightness, not its hue or saturation. A common mistake is to desaturate a colour to increase contrast, which makes it dull. The better fix is to darken the background or lighten the text by moving the luminance value.

For example, a primary button with white text on a medium blue has a ratio of about 4.0:1, which fails for normal text but passes for large text and UI components. To fix it, darken the blue by 10% in luminance, which brings the ratio above 4.5:1. The change is invisible to most users, but it is the difference between a pass and a fail. Do not rely on a colour picker's hue slider. Use a luminance calculation tool or a contrast calculator that shows the relative luminance of both colours. The free tools from WebAIM and the W3C are accurate, but you must enter the hex codes from your design file, not the values the checker samples from the screen.

The failure case is when you are in a hurry and you accept a 4.4:1 ratio because it is close. You will fail usability testing, and you will fail an accessibility audit, and you will have to fix it anyway. Build the contrast ratio into your design system as a constraint, not a check at the end. For each text colour, define its lightest acceptable background and its darkest acceptable background, and test all combinations. This is not extra work. It is the work. When you do it, the design is more accessible, and it is also more robust, because a design that passes at 4.5:1 will also pass at 5.1:1 and 7:1.

The antialiased-edge false pass is not limited to text. It affects UI components such as icons, focus rings, and form fields. A focus ring is a one-pixel outline around an interactive element that indicates keyboard focus, and its contrast ratio must be at least 3:1 against the adjacent background. A common failure is when the focus ring is a light grey on a white background, and the checker samples a pixel where the ring's antialiased edge blends with the white, reporting a 4.0:1 ratio. The ring is actually 2.0:1, and it is invisible to users with low vision.

The root cause is that the UI element's stroke is thinner than the antialiasing range, so the edge pixels dominate the sample. The fix is to measure the flat colour of the focus ring, not its edge, and to ensure that the ring is at least 2 pixels thick. A 1-pixel ring will be partially blended away on most displays. A 2-pixel ring will have a consistent colour. The WCAG 2.2 requirement for graphical objects is 3:1, and a 2-pixel ring at a 3:1 ratio is visible. If you use a 1-pixel ring, you need a ratio of 4.5:1 to be safe, because the antialiasing will degrade it.

The verifiable fix is to test the focus ring at the same size it will be used, and to test it against the worst-case background, which is the background with the lowest contrast ratio against the ring. If the focus ring is visible on a white background but not on a photograph, you have a contrast failure. The solution is to use a double ring: a dark ring against light backgrounds and a light ring against dark backgrounds, or to use a single dark ring with a white halo. This is a design system decision, not a per-component fix, and it should be specified in the same way you specify the focus state's box-shadow or border-colour.

Print shift is the failure where colours on the printed sheet do not match the soft-proof. It is caused by a mismatch between the RGB working space and the CMYK output profile. A common mistake is when a designer exports a PDF using a PDF/X-1a standard, which requires all colours to be converted to CMYK and does not support live transparency, and the printer's RIP interprets the file differently than the designer's screen. The result is a print that is too dark, too green, or too muddy, and the designer blames the printer.

The root cause is that the designer did not embed the ICC profile in the PDF, or embedded the wrong one. The fix is to use a PDF/X-4 standard, which supports live transparency and ICC colour management, and to embed the output intent profile. For Europe and Australia, the output intent is Fogra39 for coated stock, and for North America it is U.S. Web Coated (SWOP) v2. If you export a PDF with no output intent, the printer's RIP will use its own default, which is almost certainly different from what you saw on screen. The ink on paper will not match the RGB values in your file, because the RGB values are out-of-gamut, and the RIP clips them.

The verifiable fix is to soft-proof with the correct Fogra profile, convert your images to CMYK, and then export a PDF/X-4 with the output intent embedded. You should also check the total ink coverage, which is the sum of the CMYK percentages for any given pixel. A rich black for coated stock is C 60 M 40 Y 40 K 100, but if you set text to 100% black on a dark background, the ink coverage is only 100% for the text and 240% for the background, which is safe. However, if you use a rich black for large areas and the ink coverage exceeds 300%, the ink may not dry properly on uncoated stock, causing set-off, where the wet ink transfers to the next sheet. Use a lighter rich black for uncoated stock, such as C 40 M 30 Y 30 K 100, and check the total ink coverage in your layout software.

Fixing print shift is a matter of matching the output intent. The first step is to obtain the ICC profile from your printer. If they cannot give you one, ask for the press name and the paper type, and download the corresponding Fogra profile from the ICC website. Then, in InDesign or Affinity Publisher, set the document's CMYK working space to that profile. This is not the same as converting the document. It is assigning a profile that tells the software how to interpret the CMYK values.

Second, turn on soft-proofing. In InDesign, this is under View > Proof Setup > Custom, where you select the output profile and the rendering intent. The screen will then show a simulation of how the colours will look on paper, including the paper's whiteness, which is why the proof is always dimmer and flatter than the RGB screen. A bright RGB blue will appear as a muddy purple, because that is the closest the ink can get. Adjust the RGB colour until it looks correct in the soft-proof, not until it looks correct on the screen. This is counterintuitive, but it is the only way to avoid gamut clipping.

Third, export the PDF with the correct PDF/X standard. PDF/X-4 is the current standard for commercial print because it supports live transparency and ICC colour management. PDF/X-1a, an older standard, flattens transparency and converts everything to CMYK, which can cause unpredictable results if your file contains RGB images or blend modes. The failure case is when you receive the printed sheets and the colours are wrong, and you have no way to fix it because the file is already on press. Soft-proof, convert, and export the PDF correctly, then check the output preview in Acrobat to ensure that no colours are flagged as out-of-gamut.

The false pass for text has a sibling: the same failure affects UI components such as icons, borders, and focus indicators. A UI component with a 3:1 contrast ratio against its background can pass a checker if the checker samples a blended edge pixel. A common failure is when a button has a border that is 1 pixel wide and a fill that is a lighter shade, and the checker reports a passing ratio for the border because the edge pixel merges with the background. The border is invisible, and the button looks like a rectangle of text with no affordance.

The root cause is that the checker is testing the rendered pixel, which is antialiased, rather than the flat colour. Measure the flat colour of the border or icon, not the edge, and ensure that the shape is at least 1 physical pixel wide after accounting for the display's pixel density. On a high-DPI display, a 1-pixel border is rendered as 2 or 3 device pixels, which is fine. On a standard display, a 1-pixel border is exactly 1 device pixel, and the antialiasing blends it. The WCAG 2.2 threshold for graphical objects is 3:1. Test the shape's fill, not the antialiased edge.

The verifiable fix is to use a contrast checker that allows you to enter the flat hex values, not just click on the screen. WebAIM's colour contrast checker and the W3C's mobile accessibility checker both accept hex codes. Enter the exact colours from your design system, and test the icon or border against the background. If the ratio is below 3:1, you must darken the border or the background. This is not a matter of taste. It is a WCAG 2.2 requirement, and it is verifiable. The failure case is when a user with low vision cannot see the border, cannot tell where the button ends, and clicks the wrong thing. Test the flat colour, not the edge.

What is the most common colour mistake designers make?

Designing on a bright screen without soft-proofing or checking the contrast ratio of flat colours. This causes low contrast design that fails WCAG 2.2 and relies on the screen's luminance to look readable.

Why does my screen blue print as a muddy purple?

That is RGB-to-CMYK gamut clipping. The sRGB blue is outside the CMYK gamut, so it is clipped to the closest printable colour. Soft-proof with a Fogra profile and adjust the colour to stay in gamut.

Can I trust a contrast checker plugin?

No. Many checker plugins sample antialiased edges, inflating the ratio by up to 1.5:1. Always calculate the contrast ratio from flat fill values using the WCAG 2.2 formula before trusting a plugin.

How many accent colours should a design have?

One. An accent colour is a single hue for interactive elements and data highlights. If you need semantic colours for errors or success, define them separately. More than one accent dilutes the visual hierarchy.

This subject, the specification of colour in graphic design, suits the working professional who needs to ship work that passes a quality bar: the developer who must implement a design system, the marketer who commissions a brochure that must not come back from the printer muddy, and the content writer who needs to know why their brand guidelines specify a purple that looks blue on screen. It also suits the self-taught designer who has felt the sting of a rejected print run or a failed accessibility audit and wants a vocabulary for what went wrong. If you are a hobbyist who wants to be inspired by pretty palettes, this is not the subject for you. There is no inspiration here, only constraint. If you are looking for the opinion of a named studio or a report on what colours are fashionable this season, this subject will not satisfy you, because it has no personality. But if you are the person who has to tell a client that their logo cannot be reproduced in CMYK, or a developer who needs a contrast ratio that will pass an audit, then this subject is the difference between a design that fails and one that holds up in production.

The single most useful fact on this subject is that a contrast checker can report a false pass of 4.5:1 when the real flat-colour ratio is 3.9:1 because it sampled an antialiased edge pixel, and that the fix is to calculate the WCAG 2.2 contrast ratio from flat fill values using the (L1 + 0.05) / (L2 + 0.05) formula. No other resource on this subject gives that concrete number and that actionable correction.