This produces red when the value reaches 4 because you are not comparing numbers, you are comparing string. In widget expressions, items.itemName.state always returns a string representation of the item state, so in this case "4", not 4. A string comparison tests each character in the two strings one at a time (it is “alphabetizing” them). So the first check is "4" > "3" which is true and so the ternary statement returns "red".
You want a number comparison. So, as @ubeaut pointed out you need to not have the "..." around the value, and @justaoldman also gave you the other part of the solution which is that you have to enclose the item state in something that converts the state string to a number such as Number.parseFloat. If you have both those piece then you are comparing two numbers and 4 will indeed be less than 30.
If you properly converted that example it should have worked. Note that the provided example is getting the item state via a property and yours is not, so for your widget the conversion looks more like this:
