# ANDRES homepage blue and readability comparison

Prepared 7 October 2026. Design comparison study. Baseline: 6b74e2e13b44786af89b20203009e47584c9aa14.

**Recommendation: retain the current navy, preserve an image overlay, and strengthen the mobile hero overlay.** The current blue provides the most contrast headroom in the existing color system. Published research also supports a dark-blue direction for trust; that research is separate from our measured readability comparison.

## Why dark blue supports the direction

A peer-reviewed experiment with 216 participants compared lighter and darker blue online accommodation offers. It found a trust-mediated relationship between darker blue and booking intention. The authors recommend dark blue for online environments involving higher involvement or vulnerability. [Broeder and Snijder (2019), Tilburg University](https://research.tilburguniversity.edu/en/publications/colour-in-online-advertising-going-for-trust-which-blue-is-a-must/).

This supports our design recommendation. It does not prove that the exact current ANDRES blue outperforms its legacy blue or establish a conversion uplift for this website. The experiment used a different context and colors.

## Related creative exploration

The supplied creative findings report is an illustrative Cortex/TRIBE v2 scenario. It states that no model execution was performed to prepare it. Its proposed trust, recall and click effects are design hypotheses; scenario percentages are not included as measured results in this comparison. [Meta TRIBE v2 documentation](https://github.com/facebookresearch/tribev2) describes brain-response prediction.

## Five controlled alternatives

The legacy endpoint is the full ANDRES master wordmark's fill, #11496C. The icon-only file has the slightly different #104A6D. The legacy website's #26AFFF is a separate cyan accent, not the master wordmark blue.

B, C and D interpolate sRGB channel values evenly, rounded to integer channels. Each mockup retains the same layout, copy, type, photographs and dimensions.

| Alternative | Blue | Offwhite on blue | 75% muted offwhite on blue | Blue on cyan / cyan on blue | Normal-sized cyan pairing |
|---|---|---:|---:|---:|---|
| A · Legacy wordmark | #11496C | 9.42:1 | 6.07:1 | 3.95:1 | Adjust small cyan pairings |
| B · Intermediate 1 | #134162 | 10.54:1 | 6.69:1 | 4.42:1 | Adjust small cyan pairings |
| C · Intermediate 2 | #163A58 | 11.60:1 | 7.27:1 | 4.86:1 | Pass |
| D · Intermediate 3 | #18324E | 12.87:1 | 7.94:1 | 5.39:1 | Pass |
| E · Current navy | #1A2A44 | 14.16:1 | 8.60:1 | 5.94:1 | Pass |

Offwhite: #FEFDFB. Cyan: #26AFFF. Pass/fail uses unrounded values.

All five solid offwhite/blue pairs exceed 7:1. A/B fall below 4.5:1 for normal-sized blue button text on cyan and the cyan telephone link on a blue footer. **This does not make the legacy identity inaccessible.** A/B can retain separate darker button ink and change the footer-link pairing. C/D/E pass these tested solid pairings.

## Image treatment comparison

All five desktop palettes are captured with three treatments (15 complete homepage mockups):

1. **Current gradient:** hero blue opacity 85% at the left, 62% at 65% width, 38% at the right. Careers retains its opposing gradient and 86% mobile wash.
2. **Flat overlay:** the same 72% blue opacity over hero and careers images. This removes the gradient while retaining text protection.
3. **No overlay:** no wash on either of those photographs. Type and photography remain unchanged.

All current-gradient desktop palettes meet the modeled photo-text thresholds at the selected placements. Flat overlays also meet those desktop photo-text thresholds. **Removing the overlay produces photo-text flags with every palette.** Changing the surrounding blue cannot repair white text over a bright, unprotected image.

Without overlay, the desktop hero heading's conservative model reaches about 2.19:1, below 3:1 for large text. Careers text crosses very bright areas and is substantially worse. These are source-photo estimates over text rectangles, not calibrated display measurements.

Mobile captures include all five current-gradient palettes, the flat/no-overlay endpoints A/E, and an extra E correction prototype. Intermediate mobile flat/no-overlay combinations are not represented as tested.

## Mobile finding and correction prototype

The current E mobile hero paragraph is 18px and requires 4.5:1. Its conservative text-rectangle minimum is **4.21:1**. Checking actual letter positions returns about **4.24:1**, consistently across three glyph-mask thresholds. This needs a correction.

The small E eyebrow's rectangle minimum was 4.42:1, but its actual letters were above 5.10:1. Treat that eyebrow estimate as a conservative flag, not a confirmed failure. A's careers paragraph similarly passes at actual letters (about 4.65:1), despite its conservative rectangle flag. The results retain those flags transparently.

A private E prototype applies a uniform **80% current navy hero wash below 768px**. It preserves the desktop gradient and existing 86% mobile careers wash. The hero paragraph's conservative minimum rises to **9.23:1**. All 22 selected placements meet their modeled thresholds in this prototype.

**The correction is not published.** Verify actual moving video and devices before calling the final hero fully tested. The flat 72% treatment is not a universal mobile fix: the E careers paragraph's conservative minimum is about 4.06:1. Preserve a stronger careers wash.

## Criteria and interpretation

WCAG 2.2 requires 4.5:1 for normal text and 3:1 for large text. Large text is at least 24 CSS px regular or 18.67 CSS px bold (700+). Enhanced normal-text contrast is 7:1. [W3C: Contrast (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html).

A ratio measures light/dark distinction. It does not choose an aesthetic winner, predict conversion, prove trust or diagnose a monitor. Perceived darkness and photographic detail remain legitimate design discussion points.

**This is a targeted contrast study, not full WCAG certification.** Keyboard behavior, assistive technology, focus/hover states, reflow/zoom, all routes and all moving-video frames are not certified. [W3C: Non-text Contrast](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html). [W3C: Pause, Stop, Hide](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html).

## Reproducible method and limits

- Desktop: 1440×900 CSS px. Mobile: 390×844 CSS px. 25 complete homepage comparison captures plus diagnostics.
- Existing static poster images hold footage constant. Reduced motion and revealed entrance content hold animation state constant.
- Specified CSS sRGB values supply solid-pair ratios. Alpha is composited before applying WCAG relative luminance.
- Photo estimates use the exact served source images, recorded object-fit crops and positions, CSS overlays, and actual computed text color, opacity, size and weight.
- Rectangle minima are conservative and may include bright whitespace between letters. The separate A/E mobile diagnostic locates glyphs using visible-vs-hidden-ink screenshots; modeled source-photo colors still supply the ratios.
- BICUBIC image resizing approximates browser resampling. Subtle decorative overlays, exact browser color management and physical displays are not independently calibrated. Near-threshold estimates require follow-up.
- Screenshot colors differ from declared CSS sRGB. JPEGs provide visual mockups, not authoritative pixel contrast measurements.
- Twenty-two placements are representative roles, not independent users or a WCAG compliance percentage. Raw pass counts must not be presented as website grades.
- All conditions, including unfavorable findings, are retained.

## Files and provenance

- [Interactive comparison](ANDRES-Blue-Comparison.html)
- [Simple chart](ANDRES-Blue-Simple-Chart.svg)
- [Detailed chart](ANDRES-Blue-Contrast-Chart.svg)
- [Exact color pairs](Color-Pairs.json)
- [All modeled placements](Contrast-Results.csv)
- [Model results](Contrast-Results.json)
- [Glyph diagnostic](Glyph-Diagnostic.json)
- [Capture manifest](Study-Manifest.json)

Legacy master: the full ANDRES construction-logo SVG, fill #11496C.
Current palette: src/app/globals.css at the baseline commit.
[Current private review site](https://andres.dev.8gnc.io/). [Legacy public reference](https://www.andresconstruction.com/).

## Decision for the team

Keep E because it gives the largest contrast margin with the existing cyan/offwhite system. Maintain image protection and review the mobile adjustment. If a lighter blue is preferred, C/D remain viable with an appropriate mobile overlay. A/B remain viable with separate darker button ink and revised footer-link colors.

The choice remains a design preference within accessible implementation options. The recommendation rests on measured contrast headroom, the current design system, and relevant published trust research.