fix(tui): make the model-line badge text readable on the accent color#116
Merged
Conversation
The mode badge (e.g. `KITTY`/`BUILD`) and the `/connect` pill styled their text with `.fg(Color::Black).add_modifier(Modifier::BOLD)`. `Color::Black` is ANSI index 0, and many terminals render *bold + indexed black* as "bright black" (gray), which washes out against the violet/blue/amber accent background — the reported low-contrast badge. Add `readable_fg_on(bg)`, which returns an explicit `Color::Rgb` black or white chosen by WCAG relative-luminance contrast. RGB colors aren't subject to bold-brightening, so the badge text stays solid. For all three current accents it resolves to true black (contrast 4.96 / 6.02 / 12.24 vs white's 4.23 / 3.49 / 1.72), and it auto-flips to white if a darker accent is added. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
Improves TUI badge text contrast on accent-colored backgrounds by avoiding ANSI indexed black (which many terminals brighten under bold) and instead selecting an explicit RGB black/white foreground based on relative luminance.
Changes:
- Add
readable_fg_on(bg)helper to choose an explicit RGB foreground color for a given RGB background. - Update the input header mode badge and
/connectpill to usereadable_fg_on(app.accent_color)for their foreground styling. - Adjust
render.rsimports to include the new helper.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
src-rust/crates/tui/src/render.rs |
Uses readable_fg_on() for the mode badge and /connect pill foreground to keep text readable on accent backgrounds. |
src-rust/crates/tui/src/app.rs |
Introduces readable_fg_on() helper that selects explicit RGB black/white using WCAG-style luminance math. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+1629
to
+1635
| pub fn readable_fg_on(bg: Color) -> Color { | ||
| let (r, g, b) = match bg { | ||
| Color::Rgb(r, g, b) => (r, g, b), | ||
| // Non-RGB backgrounds (themes/indexed): default to black, which reads | ||
| // on the light/mid accent tones used here. | ||
| _ => return Color::Rgb(0, 0, 0), | ||
| }; |
| /// black into low-contrast gray — the cause of the washed-out badge text. The | ||
| /// choice is made by comparing WCAG relative-luminance contrast ratios, so it | ||
| /// stays correct if the accent palette changes. | ||
| pub fn readable_fg_on(bg: Color) -> Color { |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The mode badge on the input header (
KITTY/BUILD/PLAN/…) and the/connectpill rendered their text with.fg(Color::Black).add_modifier(Modifier::BOLD).Color::Blackis ANSI index 0, and many terminals render bold + indexed black as "bright black" (gray) — which washes out against the violet/blue/amber accent background. That's the low-contrast badge text that was reported.Fix
Add
readable_fg_on(bg)(inapp.rs) and use it for both badge spans. It returns an explicitColor::Rgbblack or white — RGB colors aren't subject to bold-brightening, so the text stays solid — choosing the higher-contrast option by WCAG relative luminance.For the three current accents it resolves to true black, which is the higher-contrast choice every time:
It auto-flips to white if a darker accent is ever added, so it stays correct as the palette changes.
Before / after
BEFORE— bold + indexed black brightens to gray on the violet badge.AFTER— solid true-RGB black, legible.Testing
cargo check -p claurst-tuipasses.Color::Blackspans inrender.rsare left as-is.🤖 Generated with Claude Code