Brand Color Palette and Contrast Checker

Begin with the jobs your bookshop colors must do

A palette is useful when another person can tell where each color belongs. Start with the work, not a search for eight attractive swatches. Chapter Lane needs a light reading surface, dark ordinary text, a recognizable green for headings, and a yellow highlight for event details. Its fifth color is a pale secondary surface. These are intended jobs rather than automatic permissions: every text color still needs checking against the background it actually touches.

The shop manually enters Paper #FFFFFF, Ink #222222, Pine #245C45, Marigold #F2C14E and Mist #E8ECE9. This worked palette is separate from the Load example starter. Names help the discussion; HEX values identify the opaque colors being calculated. A name such as Readable Green cannot make a weak pair pass. Conversely, a bright decorative color need not be removed merely because it is unsuitable for a small caption on white.

Name the project Chapter Lane reading group, October draft. Choose All platforms for a general review, or use a platform context to label the intended job. The nine social contexts share identical contrast mathematics; changing the selector does not inspect an account, load a native layout or create a different accessibility standard. Put the actual headline or event detail in the sample text so the preview has editorial meaning, while remembering that its wording does not change the ratio.

Decide which information must remain readable before comparing alternatives. The shop prioritizes the meeting date, booking instruction and book title over a decorative border. This establishes an order for design decisions without pretending to predict attention or clicks. Keep a short role note with the design brief. The color roles and contrast guide develops that note into light and dark variants when a single list of swatches stops being enough.

Choose known HEX values or a representative image sample

Manual entry is the better starting point when a designer has supplied approved digital values. Keep between two and eight opaque colors and enter six-digit HEX values such as #245C45. An opaque color has no separate transparency setting here. If a campaign uses a translucent overlay, the final appearance depends on what is underneath; an uncomposited overlay value is not a valid substitute for the solid background this checker measures.

When no palette document exists, open a local PNG, JPEG or WebP. Extraction prepares a resized browser sample with neither side greater than 128 pixels and finds representative colors in that sample. It is not exact brand recognition, an original-resolution pixel inventory or a measurement of image-area percentages. A photographed shelf may contribute warm lighting and book-cover colors that have nothing to do with the shop’s identity. A clean brand asset is usually a more relevant starting input.

Choose the matte explicitly before extracting an image with transparency. Fully transparent pixels are ignored. Partly transparent sampled pixels are combined with that opaque matte, so changing it can change the representatives. An entirely transparent sample cannot supply a palette. If a valid sample produces only one unique color, a clearly identified manual black or white helper supplies the second editable color. That helper is not an additional color discovered in the image.

The file must fit the local limits: at most 8 MiB, at most 24 million pixels, and no side above 8,192 pixels. Animated PNG and animated WebP are not accepted, nor are SVG or GIF inputs. Prepare a suitable still image in your usual editor rather than renaming an unsupported extension. Extraction runs locally without an API or AI service. For edge transparency, matte choices and source metadata, use the transparent logo extraction guide before treating any representative as an approved brand value.

Read a solid foreground and background result correctly

Select the foreground that will carry the words and the background directly behind them. The calculation converts the two sRGB colors to relative luminance, then divides the lighter luminance plus 0.05 by the darker luminance plus 0.05. It is a relationship between two colors, not a score belonging to one swatch. Black against white gives 21:1; choosing the same color for both sides gives 1:1, even when the sample sentence is especially important.

For the text contrast thresholds shown here, WCAG 2.2 AA requires at least 4.5:1 for normal text and 3:1 for large text. AAA requires at least 7:1 for normal text and 4.5:1 for large text. Read all four results rather than collapsing them into one universal pass label. A pair that meets AA for large text can still fail AA for a smaller date line placed beside the same headline.

Displayed ratios are approximate values shown to three decimal places. Status uses the underlying unrounded calculation. A value just below 4.5 fails that threshold even if the display rounds to 4.500. Do not round a screenshot, compare it with a target and overrule the tool’s status. When selecting a replacement, choose one with comfortable room above the requirement instead of chasing a borderline result that will be difficult to explain during a later handoff.

Large text is a size condition, not a description of how prominent the message feels. The reference is 24 CSS pixels for regular text or approximately 18.667 CSS pixels for bold text. An image exported at a large canvas size may appear much smaller after placement. This checker does not establish the eventual rendered size. When the shop cannot verify that its event details remain large, it uses the normal-text result and separately examines the finished artwork at its intended viewing size.

Repair the reading-group announcement with measured pairs

Chapter Lane first tests Ink on Paper. The displayed ratio is approximately 15.910:1, clearing the normal-text AAA threshold. Pine on Paper gives approximately 7.801:1 and also clears that threshold. These results give the designer two useful text choices for a white panel: dark neutral wording for practical details and green wording where a brand-colored heading is appropriate. They do not require every paragraph to be green or establish which typeface the shop should use.

The yellow date line reveals the problem. Marigold on Paper measures approximately 1.678:1, below even the large-text AA threshold. Making the date bold does not change the colors or the measured ratio. The team keeps yellow in the design but changes its job: a solid Marigold strip carries Ink text. Ink on Marigold measures approximately 9.480:1, clearing normal-text AAA. The recognizable accent survives without being asked to perform as pale text on white.

Next the designer puts a green heading on the pale Mist panel. Pine on Mist measures approximately 6.541:1. It clears normal-text AA and large-text AAA, but not normal-text AAA. This is a different result from Pine on Paper, although the foreground has not changed. For small secondary instructions where the team wants its stronger normal-text target, Ink on Mist gives approximately 13.339:1. The choice follows the actual pair and intended role, not a permanent approval stamped on Pine.

The revised announcement uses Paper for the main field, Ink for the meeting information, Pine for its title, and the yellow strip only behind dark wording. Mist separates a short reading-list panel. The designer records these placements in the brief before exporting. No result predicts registration numbers or certifies the whole announcement. The practical gain is narrower and verifiable: the team replaced a specific weak text pair while keeping the visual identity and can explain exactly why the replacement belongs there.

Use the full matrix to prevent accidental combinations

A selected pair answers one immediate question. The matrix answers what happens when colleagues combine any two colors in the inventory. With five colors there are 25 foreground and background cells, including the five same-color cells. Those diagonal cells have a ratio of 1:1; they are not calculation errors or missing results. A palette does not become defective because its matrix contains them. It needs clear intended pairings, not an impossible promise that every combination will work.

Contrast ratio is symmetric: Pine against Paper has the same numerical ratio as Paper against Pine. The design roles are not symmetric. Dark green lettering on a white announcement and white lettering on a dark green banner create different layouts, even when their pair status matches. Click the relevant cell and examine the selected foreground and background together. Keep both names in a handoff rather than describing a result as the green ratio and leaving its partner unstated.

Read across an actual task. For a yellow event ribbon, compare every possible text color against Marigold. For a pale reading-list panel, compare the text options against Mist. The highest-contrast pair is useful evidence, but it need not be the right pair for every component. Paper and Ink may dominate the contrast ranking while Pine remains an acceptable branded heading choice. The strongest combination is not an automatic recommendation for the entire design.

Write a concise placement rule after reviewing the cells: ordinary text uses Ink on Paper or Mist; the yellow strip uses Ink; Pine headings use Paper unless the target is checked again. These are human decisions recorded outside the matrix, not restrictions the checker applies to another editor. Remove a redundant swatch only after considering what uses it. If a color changes, revisit every intended pairing involving that color rather than checking only the pair that happens to remain selected.

Check the finished design beyond the palette calculation

The preview shows an opaque foreground and an opaque solid background. It does not inspect the bookshop photograph behind a caption, locate the brightest part of a video, follow a moving frame or evaluate a gradient. Entering a representative color extracted from a photograph does not make that photograph a uniform background. A caption can cross several very different regions even when one sampled color produces a reassuring result. Judge that layout in its actual editing and review environment.

For predictable text placement, Chapter Lane chooses a genuinely opaque panel in the artwork. Its text pair can then be reviewed as two known solid colors. That design decision is separate from the checker: exporting the palette does not place the panel, remove transparency or rewrite the announcement. Shadows and outlines may influence appearance, but this tool does not analyze their geometry or use them to rescue the selected pair. Test the values corresponding to the solid area that really sits behind the words.

Contrast is only one part of a readable announcement. The shop still checks wording, type size, line spacing, crowding, reading order and whether the date remains visible in the final placement. Essential information should not depend solely on a green or yellow distinction. Calling a session Open or Full in words communicates more than an unexplained color change. These are editorial and layout reviews, not additional checks secretly included in the contrast status.

Use channel-specific examples when the format creates a different design problem. The Instagram carousel palette guide considers coordinated slides, while the Facebook event graphic guide focuses on an event announcement. Their use cases differ, but the solid-pair formula does not. Neither the context label nor a successful palette review certifies a native platform post or supplies a complete accessibility assessment.

Export the evidence each collaborator actually needs

Choose PNG when the designer needs a visual palette reference with the selected pair. It is a palette output, not a regenerated bookshop logo or finished event graphic. Keep the original editable artwork in its normal location. A swatch image helps someone recognize and compare colors, but it cannot replace the underlying values when they need to enter an exact HEX code. Send the relevant data format alongside it when the recipient is implementing rather than merely reviewing.

Choose PDF for a readable report containing the palette, full matrix, method and declared extraction metadata when present. Its visual review is rasterized, so keep CSV or JSON when selectable data is needed. The report documents this palette state; it is not an accessibility certificate. It does not contain the original local image. A reviewer who needs to inspect the bookshop logo must obtain that separate source through the team’s usual file-sharing process.

CSV suits a spreadsheet review of the recorded colors and contrast results. Preserve foreground and background identities when sorting rows so a ratio does not become detached from its pair. CSS provides reusable color declarations for a developer, not a completed theme or guaranteed compliant component library. A developer must assign those values to actual elements and inspect the implemented result. Copy is convenient for taking the current result into a brief or message without creating an extra report file.

Use JSON for an editable continuation of the checker project. It retains the color inventory, selected pair, sample text, title and context, with declared extraction metadata if applicable. It saves no image bytes. Give the export a useful dated filename and agree which version is current before circulating it. A PDF can explain a decision and a PNG can illustrate it, but neither is the project format used to reopen and continue editing the same palette.

Save the palette before moving into production

There is no autosave or browser-storage recovery for this project. Download JSON before closing the page if the palette needs to survive the session. Reopening a valid saved project restores colors and selections, not the source image or a connection to its original file. Source metadata records the declared filename, original and sample dimensions, visible sampled pixels, matte and edit state. Those fields explain the extraction context; they are not an embedded image backup or proof of exact brand ownership.

Editing a HEX value, adding a color or removing one marks an extracted palette as edited. Retaining its extraction metadata does not mean the revised values all came directly from that sample. For Chapter Lane, the final approved manual values and the original representative extraction are different stages of work. Save each stage under a clear name when the distinction matters. Keep approval comments and the source artwork in the existing project record rather than expecting JSON to become a general asset-management system.

Before handoff, the shop confirms the current five HEX values, the small-text pair on each surface, the yellow ribbon treatment and the version of the report. Someone then applies those choices in the artwork editor and checks the exported announcement. This separates a measured palette decision from implementation. The free tools directory offers other preparation tasks, but no export here publishes a post, connects a native profile or automatically sends a project into SMTasker or Skye.

Once the artwork is ready, social operations are a separate decision. The Instagram automation overview explains supported routines such as likes, saves and Story viewing with chosen sources, timing and limits. A five-day SMTasker trial can help the bookshop evaluate a suitable routine and review its activity. The palette work stays in the design workflow; the trial is for supported account actions, not automatic palette import, brand enforcement or a promise that the announcement will earn more clicks.

Questions about brand colors and contrast