Add color samples

app.py

@@ -25,10 +25,10 @@ def parse_hex(rgb_hex_str: str) -> tuple[float, float, float]:
         raise ValueError("Invalid hex color")
     return tuple(int(rgb_hex_str[i:i+2], 16) / 255 for i in (1, 3, 5))
 
-primary_color_rgb = parse_hex(primary_color)
-text_color_rgb = parse_hex(text_color)
-background_color_rgb = parse_hex(background_color)
-secondary_background_color_rgb = parse_hex(secondary_background_color)
+# primary_color_rgb = parse_hex(primary_color)
+# text_color_rgb = parse_hex(text_color)
+# background_color_rgb = parse_hex(background_color)
+# secondary_background_color_rgb = parse_hex(secondary_background_color)
 
 st.header("WCAG contrast ratio")
 
@@ -47,17 +47,17 @@ col1, col2, col3 = st.columns(3)
 with col1:
     synced_color_picker("Primary color", value=primary_color, key="primaryColor")
 with col2:
-    fragments.contrast_summary(primary_color_rgb, background_color_rgb)
+    fragments.contrast_summary(primary_color, background_color)
 with col3:
-    fragments.contrast_summary(primary_color_rgb, secondary_background_color_rgb)
+    fragments.contrast_summary(primary_color, secondary_background_color)
 
 col1, col2, col3 = st.columns(3)
 with col1:
     synced_color_picker("Text color", value=text_color, key="textColor")
 with col2:
-    fragments.contrast_summary(text_color_rgb, background_color_rgb)
+    fragments.contrast_summary(text_color, background_color)
 with col3:
-    fragments.contrast_summary(text_color_rgb, secondary_background_color_rgb)
+    fragments.contrast_summary(text_color, secondary_background_color)
 
 
 st.header("Config")

fragments.py

@@ -1,12 +1,17 @@
 import streamlit as st
 import wcag_contrast_ratio as contrast
 
+import util
 
-def contrast_summary(rgb1: tuple[float, float, float], rgb2: tuple[float, float, float]) -> None:
-    contrast_ratio = contrast.rgb(rgb1, rgb2)
+
+def contrast_summary(foreground_rgb_hex: str, background_rgb_hex: str) -> None:
+    rgb_foreground = util.parse_hex(foreground_rgb_hex)
+    rgb_background = util.parse_hex(background_rgb_hex)
+    contrast_ratio = contrast.rgb(rgb_foreground, rgb_background)
     contrast_ratio_str = f"{contrast_ratio:.2f}"
     st.metric("", value=f"{contrast_ratio_str} : 1")
 
+    st.markdown(f'<p style="color: {foreground_rgb_hex}; background-color: {background_rgb_hex}; padding: 12px">Lorem ipsum</p>', unsafe_allow_html=True)
 
 def sample_components(key: str):
     st.slider("Slider", min_value=0, max_value=100, key=f"{key}:slider")

util.py

@@ -0,0 +1,7 @@
+import re
+
+
+def parse_hex(rgb_hex_str: str) -> tuple[float, float, float]:
+    if not re.match(r"^#[0-9a-fA-F]{6}$", rgb_hex_str):
+        raise ValueError("Invalid hex color")
+    return tuple(int(rgb_hex_str[i:i+2], 16) / 255 for i in (1, 3, 5))