Third Color Finder

Each candidate receives an internal 0–100-style ranking score based on several factors used by the tool. The scoring considers: 1. Minimum contrast The weaker of the two contrast ratios matters most because the third color needs to work against both base colors. 2. Average contrast The average contrast can provide an additional signal for how balanced the result is across the two bases. 3. WCAG-related bonuses Candidates that meet stronger contrast thresholds against both bases can receive additional score weight. 4. Color harmony Candidates can receive additional weight according to their supported harmony relationship, such as complementary, triadic, split-complementary, analogous, or monochromatic. The score is the tool's ranking metric. It is separate from the WCAG badge, which describes contrast accessibility. Your current top result is 54/100 — fair.

WCAG contrast levels describe how much contrast exists between the suggested color and the base colors. • AAA — minimum contrast of 7:1 • AA — minimum contrast of 4.5:1 • AA Large — minimum contrast of 3:1 for qualifying large text • FAIL — below 3:1 The tool uses the minimum contrast of the two base-color comparisons because the suggested color needs to be evaluated against both bases. Large-text thresholds are based on WCAG's definition of large text rather than simply using an arbitrary pixel size. Current result: AA-Large with a minimum contrast of 3.18:1 (AA Large).

Because a high average can hide a weak contrast on one of the bases. For example, imagine a color with: • 8:1 contrast against Base 1 • 1.2:1 contrast against Base 2 The average is 4.6:1, but the color still has very poor contrast against Base 2. Using the minimum contrast makes the weaker relationship visible: • Both base colors are evaluated • A strong result cannot hide a weak result behind an average • The tool can prioritize colors that work more consistently across the pair This is why a color that looks strong against one base can still rank lower if it performs poorly against the other.

These are common color-wheel relationships used by the tool: • Complementary — colors positioned approximately opposite each other on the color wheel. • Triadic — three colors distributed approximately 120° apart. • Split-Complementary — colors positioned around the complement, creating a softer variation of a complementary relationship. • Analogous — neighboring hues on the color wheel. • Monochromatic — variations of a color using changes in lightness and/or saturation. Each suggestion can be tagged with its harmony type. Harmony is one of the factors used by the ranking system; it does not replace the contrast check.

Your two bases currently have approximately 8% lightness difference and 49° hue difference. For this tool's base-balance check, a stronger separation can come from either: • A sufficiently large lightness gap • A sufficiently large hue gap Right now, the current analysis does not meet the tool's balance conditions, so finding a third color that contrasts strongly with both bases may be more difficult. Suggestion: change Base 1 to #96DBF8 — Adjust lightness to 78% for stronger contrast.

#F2FAE0 (Frost) currently has the highest ranking score among the available suggestions. Its current details are: • Contrast vs Base 1 (#0E94CD): 3.18:1 • Contrast vs Base 2 (#331AEA): 7.88:1 • WCAG level: AA-Large • Harmony: triadic • Reason: Triadic (tonal shift) The ranking combines the tool's scoring factors, including contrast and harmony. The score itself is not a replacement for checking the actual WCAG contrast ratios.

54/100 is in the tool's "fair" score range. The candidate may still be useful for decorative or non-text UI purposes. If you need accessible text, verify the actual WCAG contrast ratios.

These are the contrast ratios between the suggested color and each base color: • C1 = contrast against Base Color 1 (#0E94CD) • C2 = contrast against Base Color 2 (#331AEA) The contrast ratio follows the WCAG relative-luminance formula: (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter relative luminance and L2 is the darker relative luminance. Useful reference points: • 1:1 = no luminance contrast • 3:1 = minimum contrast ratio used for qualifying large text • 4.5:1 = minimum contrast ratio for normal-sized text under WCAG AA • 7:1 = WCAG AAA contrast ratio for normal-sized text • 21:1 = maximum possible contrast ratio For a color to meet AA contrast against both bases, both C1 and C2 need to meet the applicable threshold.

The Trio Preview combines your two base colors with the selected accent: • Primary: #0E94CD • Secondary: #331AEA • Accent: #F2FAE0 (Frost, triadic) The WCAG indicator checks whether the selected accent reaches the tool's AA contrast requirement against both bases. Current result: No — at least one of the accent-to-base contrast checks is below 4.5:1. Clicking another suggestion can replace the accent and update the trio preview.

The tool does not attempt to display every possible color. Candidates can be filtered or ranked based on factors such as: 1. Supported harmony relationships 2. The minimum contrast requirement 3. The candidate's ranking score 4. The number of results the interface chooses to display A color you expected may therefore be missing because it does not meet one of the candidate conditions or does not rank highly enough to appear in the visible results. The tool is a recommendation aid rather than a rule that says which colors you must use. If you already have a specific color in mind, you can evaluate its contrast ratios separately.

The color suggestions are based on the base-color values supplied to the algorithm rather than the surrounding website theme. Contrast ratios are mathematically independent of whether the surrounding interface is displayed in dark mode or light mode. What can change with the website theme is the surrounding UI of the tool itself. The color-generation and contrast calculations use the supplied color values.

Each suggestion provides information that can help you decide how to use the color: • Hex code — useful for CSS, Tailwind, Figma, and other design tools • WCAG level — summarizes the minimum contrast result • C1 and C2 — show the exact contrast ratios against both bases • Harmony type — explains the color relationship used by the algorithm A practical workflow is: 1. Choose your two base colors 2. Review the generated suggestions 3. Check the C1 and C2 contrast ratios 4. Check the WCAG level for text-related use 5. Use the Trio Preview to see the three colors together 6. If the available results are weak, adjust one of the base colors and try again The internal score is useful for comparing candidates, but it should not replace the actual contrast values.

The tool can use cached calculations to avoid repeating expensive work for the same inputs. The current implementation can cache: 1. Third-color suggestions Previously calculated base-color pairs can be reused instead of recalculated. 2. Color-name lookups Color-name calculations can also be cached because repeated name generation can be relatively expensive. This can make repeated color combinations feel much faster after they have already been calculated. The cache is an implementation detail and does not change the underlying color values or scoring rules.