Nodes/ComfyUI_BaiKong_Node/BK Color Contrast
ComfyUI Node

BK Color Contrast

The node that decides whether your text is actually readable

By JayLyu·Created 2 years ago·Updated about a year ago· 8
BK Color Contrast
    • BG_COLOR
    • TEXT_COLOR
    bg_hex_color#FF0036
    WCAG_levelAA
    light_text_hex_color
    dark_text_hex_color

    You've composited a generated image, now you need to slap a caption on it, and you're about to just guess at a text color and hope. This node does the guessing for you with actual WCAG math - no eyeballing, no "is this legible?" squint test.

    BK Color Contrast is from the ComfyUI_BaiKong_Node pack, a small designer's toolkit for color and layout that ships with no models to download. Feed it a background color, and it works out whether light or dark text reads better on it, then hands you both colors. It's the node to reach for whenever you're overlaying titles, watermarks, subtitles, or thumbnail text on top of generated images and want to be sure the words survive.

    How it works

    Under the hood it's the actual WCAG contrast calculation. The node converts your hex to RGB, computes relative luminance using the standard sRGB formula (the 0.03928 channel breakpoint and the 0.2126/0.7152/0.0722 weights), then compares the contrast ratio of white text and black text against your background using (L1 + 0.05) / (L2 + 0.05).

    The WCAG_level dropdown sets the bar: AA means a ratio of 4.5:1, AAA is the stricter 7:1. The node picks whichever of the two candidate text colors actually clears the threshold (and if neither does, the better of the two - it tells you so in the console log). Since it's an output node, ComfyUI will also render a little inline swatch on the node showing your chosen pair, thanks to the pack's web extension.

    The inputs that matter

    • bg_hex_color - your background, any #RRGGBB string (default #FF0036).
    • WCAG_level - AA or AAA.
    • light_text_hex_color / dark_text_hex_color - optional overrides. Leave them empty and it uses #FFFFFF / #000000; supply your own brand colors and it'll tell you which of those clears the bar.

    It outputs BG_COLOR (the background, normalized to a valid hex) and TEXT_COLOR (the winning choice). Both are plain hex strings, so wire TEXT_COLOR into whatever you use to draw text or overlays - or chain it into another color node in the pack.

    Install

    The whole pack installs at once:

    cd ComfyUI/custom_nodes
    git clone https://github.com/JayLyu/ComfyUI_BaiKong_Node
    cd ComfyUI_BaiKong_Node
    pip install -r requirements.txt
    

    Then restart ComfyUI. Or just search "ComfyUI_BaiKong_Node" in ComfyUI Manager. The requirements are scikit-learn, matplotlib, scipy, opencv-python, and scikit-image - heavy-ish but all CPU-side and already present in most setups. No model files, no keys.

    Where people get burned

    The node is forgiving about malformed hex - it logs a warning and falls back to a default rather than crashing. The one thing to remember is that this is a decision node, not a filter: it commits to one text color for your whole background. If your image has bright and dark regions, you'll want a different approach than a single flat label. For the simpler "is this background bright or dark?" case, check out BK Color Luminance in the same pack.

    Category⭐️ Baikong/Color

    Inputs (4)

    NameTypeDefaultDescription
    bg_hex_colorSTRING#FF0036
    WCAG_levelCOMBOAA2 options: AA, AAA
    light_text_hex_coloroptSTRING
    dark_text_hex_coloroptSTRING

    Outputs (2)

    NameTypeDescription
    BG_COLORSTRING
    TEXT_COLORSTRING