Color and Contrast Palette

Make importance readable before making it colorful

A useful loot-label palette helps you distinguish categories quickly without requiring perfect color recognition. This palette accepts text, background, and border colors and shows a sample label on three ground swatches. It calculates text-to-background contrast after transparency is composited over each ground. It is a design aid for filter color actions, not an in-game screenshot or a complete accessibility certification.

Visual hierarchy works best when several cues agree. A border can identify a category, font size can signal urgency, and a sound can draw attention when you are looking elsewhere. Color alone is fragile: lighting, display settings, vision differences, and combat effects can all reduce a distinction that looks obvious in a quiet browser window.

Work through the controls

Enter four integers from 0 to 255 in each Text RGBA, Background RGBA, and Border RGBA field, separated by spaces or commas. The adjacent Red, Green, Blue, and Alpha sliders adjust that field. Each Hex RGB field accepts #RRGGBB and changes only the RGB channels; it preserves the field’s existing alpha. To make a dark label more opaque, adjust Background Alpha rather than entering a darker hex value and hoping for the same effect. A malformed field reports an error rather than interpreting an arbitrary input as a color.

The three previews use fixed dark, brown, and grey ground samples. Each label prints its own ratio. The Color vision approximation selector offers Unmodified, Protanopia, Deuteranopia, and Tritanopia. It alters the displayed colors approximately, but printed ratios still refer to the original composited colors, not the simulated view. Compare all three samples and useful simulations; there is no custom ground picker or category-to-category comparison here.

Every color change updates the result with three action lines: SetTextColor, SetBackgroundColor, and SetBorderColor, followed by reference-threshold notes. Copy result puts this text on the clipboard; Download result saves a plain-text .txt report. Neither action inserts rules into your filter automatically. Reset restores initial fields; Undo can restore a prior changed input. If a field is invalid, fix its four components before treating a previous result as current.

Worked example: a neutral label with a stable surface

Enter Text RGBA 240 240 240 255, Background RGBA 25 35 50 240, and Border RGBA 100 120 145 255. Leave vision on Unmodified. The result begins with these supported filter actions:

SetTextColor 240 240 240 255
SetBackgroundColor 25 35 50 240
SetBorderColor 100 120 145 255

The swatches display a light item name over a mostly opaque dark label, with a quieter blue-grey border. Ratios vary slightly because the small transparent portion of the fill mixes with three grounds. This is a starting point, not a promised appearance in either game’s renderer. Copy the three action lines into an intended Show or Hide block with an appropriate condition, not above a block header. A color action styles a match; it does not select an item class.

Try changing only Background Alpha to 80. Expect more influence from each ground, particularly the brighter grey one. If a formerly readable label becomes unreliable, restoring opacity can help more than moving the text hue. Try changing only Border RGB to a more saturated color using its hex field and compare whether it overwhelms the item’s name. Making one change at a time makes the preview explainable.

Interpret the contrast reading carefully

The computed ratio composites the chosen background against each ground and then the chosen text against that result. Raw RGB comparisons would miss the effect of transparency. The output cites common WCAG AA reference targets of 4.5:1 for ordinary web text and 3:1 for qualifying large text, but these numbers do not certify moving game labels. Browser text rendering, game post-processing, scene lighting, label size, and display scaling differ. Check labels at the distance and scale at which you play.

Keep text opacity high when readability matters. Faint names can be difficult to read even inside bold borders. An opaque background can provide a stable surface when the ground changes between scenes. The reviewed filter documentation describes action-specific default alpha values when omitted; explicit alpha in copied instructions makes a shared style easier to inspect. The Ruthless mode has additional text-alpha restrictions, so check your target mode when manually editing exported lines.

A high ratio can still feel unpleasant if every category uses glaring highlights. Create a small legend: perhaps neutral items use a quiet border, progression uses a clearer border, and a few urgent pickups receive the strongest emphasis. Where red and green borders look similar under an approximation, use different brightness, size, or sound as well. Simulations are not diagnostic tests and cannot predict every person’s experience.

Apply the result to a real rule

Suppose you want the neutral style on Rare body armour in a PoE 1 filter. A supported miniature example is Show with conditions Class == "Body Armours" and Rarity Rare, followed by the three exported color lines. Put that block in an appropriate position in your own file. If a broad terminating rule earlier in the filter already matches the item, your carefully chosen palette will never apply. Do not paste the example as an entire replacement for a maintained filter: it has no broader policy or backup.

After the edit, validate the complete file and compare it with the previous revision. You should see changed color actions, not an accidental Hide or changed condition. Install the new revision with an identifiable filename, reload it in the client, and observe an actual matching drop. This separates three questions: whether the numbers are valid, whether the item reaches the block, and whether the game renderer makes the palette legible.

Troubleshoot a misleading ratio

Imagine selecting text alpha 70 over a translucent label. Even if the input RGB is bright white, the text itself blends into the composited background, so its displayed ratio can fall. Changing only the border will not fix text contrast because the calculation concerns the text and background. Restore text opacity first and compare the three ratios. If you change the vision approximation, expect the rendered colors to change while the printed numeric ratios remain the same: those numbers intentionally measure the original colors. To evaluate a different color combination, update the underlying RGBA fields instead of treating a simulated preview as a newly measured palette.

If the three ratios look close but the game label still gets lost, remember that these are only three fixed grounds. A bright effect, movement, and adjacent item labels can change legibility in ways that a single browser chip cannot reproduce. Do not copy an apparently high ratio into every category. Test both a routine label and a highlighted one in the client, at the scale and brightness you actually use.

Common troubleshooting paths

The ratio improves, but the label feels worse: Compare labels as a set rather than maximizing a single number. Lower an unnecessarily saturated border or reserve the brightest fill for rare occasions. The same text looks different across grounds: Increase background opacity and inspect all three samples. These fixed grounds illustrate environmental variation; you cannot export a ground setting.

Exported colors never appear: Check that the three lines are inside a block that matches the intended item and that no earlier terminating block prevents it from being reached. Use the Item Tester for a supported matching trace and the Filter Validator for malformed color arguments. If the file matches but the game still shows old colors, check which installed revision is selected and reload it.

The sound contradicts the color: Sound and visual actions are separate instructions. Updating palette lines will not change an alert ID. Review both when a category changes roles. I need an entire filter: This palette exports actions only. Use the Loot Filter Builder for an original starter file, or edit an existing filter with a backup.

Next steps

Read the sounds and colors guide for a full style system, the strictness guide to keep emphasis separate from hiding, and the installation guide before checking a client result. GGG’s filter reference documents action syntax; this browser palette is only an approximation.

Back to the tool ↑